title: Dialog Box with Input Element
body: <p>I want to have a dialog window with an input. I could use the default jQuery-ui one, but I am using one that incorporate bootstrap. However, the input only appears the first time that it is opened, any subsequent times the dialog is opened, the input is missing. How would this be remedied?
  Here is the HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;link rel="stylesheet" href="../bower_components/jquery-ui/themes/base/jquery.ui.all.css"&gt;
      &lt;link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="../bower_components/bootstrap3-dialog/css/bootstrap-dialog.min.css"&gt;
      &lt;link rel="stylesheet" href="../bower_components/bootstrap-datepicker/css/datepicker3.css"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h3&gt;Hello!&lt;/h3&gt;
      &lt;div&gt;
          &lt;span&gt;Enter a Zip Code: &lt;/span&gt;
          &lt;input type="text" id="zip"&gt;
          &lt;button id="getEvents" class="btn btn-primary"&gt;Get events!&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="datepicker"&gt;&lt;/div&gt;
      &lt;div id="events"&gt;&lt;/div&gt;
      &lt;button id="addItemButton"&gt;Add an item&lt;/button&gt;
      &lt;div id="addItemDialog"&gt;&lt;input type="text" id="newItem"&gt;&lt;/div&gt;
      &lt;script src="../bower_components/jquery/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="../bower_components/jquery-ui/ui/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="../bower_components/bootstrap3-dialog/js/bootstrap-dialog.js"&gt;&lt;/script&gt;
      &lt;script src="../bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
      &lt;script src="js/calendar.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the JS:</p>
  
  <pre><code>$(function () {
      "use strict";
      var url,
          year,
          month,
          zip,
          date,
          events = [],
          newItem;
  
      $("#addItemDialog").hide();
  
      $(".datepicker").datepicker({dateFormat: "yy-mm-dd"}).click(function(){
          $("#events").empty();
          date = $(".datepicker").datepicker("getDate");
          //console.dir(date.toISOString().substr(0, 10));
          $(events).each(function(i, event){
              //console.log(event);
              if(event.date.substr(0, 10) === date.toISOString().substr(0, 10)){
                  console.log(event.title);
                  $("#events").append("&lt;h4 class='event'&gt;" + event.title + "&lt;/h4&gt;");
              }
          });
      });
  
      $("#getEvents").on("click", function () {
          zip = $("#zip").val();
          if(isValidUSZip(zip)){
              zip = zip.substr(0, 5);
              getCalendar();
          }else{
              BootstrapDialog.show({
                  message: "You must enter a valid zip code!",
                  buttons: [{label:"OK", action: function(dialog){dialog.close();}}],
                  draggable: true
              });
          }
      });
  
      function isValidUSZip(sZip) {
          return /^[0-9]{5}(?:-[0-9]{4})?$/.test(sZip);
      }
  
  
  
  
      function getCalendar() {
          $.ajax({
              type: "GET",
              url: "http://www.hebcal.com/hebcal/?v=1&amp;cfg=json&amp;nh=on&amp;nx=on&amp;year=now&amp;month=x&amp;ss=on&amp;mf=on&amp;c=on&amp;zip=" + zip +"&amp;m=72&amp;s=on",
              success: function (data) {
                  console.dir(data);
                  $(data.items).each(function(index, item){
                      //console.dir(item.date.substr(0, 10));
                      events.push(item);
                  });
              }
          });
      }
  
      $("#addItemButton").on("click", function(){
          BootstrapDialog.show({
              message: $("#newItem"),
              buttons: [{
                  label: "Enter",
                  action: function(dialog){
                      newItem = $("#newItem").val();
                      events.push({date: new Date(date).toISOString(), title: newItem});
                      dialog.close();
                  }
              }]
          });
      });
  
  });
  </code></pre>