title: JQuery datepicker inside modal popup dialog is loosing calendar icon on second time selection MVC
body: <p>I have datepicker in modal popup dialog. In first iteration everything is ok. When I open the popup second time the clandar icon in datepicker is missing, general datepicker is not responding. I assume it is not proper instantiate.</p>
  
  <p>Bellow is the difference comapre to default project MVC 2.0:</p>
  
  <p><strong>Index.aspx:</strong></p>
  
  <pre><code>&lt;asp:content id="Content2" contentplaceholderid="MainContent" runat="server"&gt;
  &lt;link href="../../Content/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="../../Scripts/jquery-1.6.4.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function updatePlaceholder(context) {
          // the HTML output of the partial view
          var html = context.get_data();
  
          // the DOM element representing the placeholder
          var placeholder = context.get_updateTarget();
  
          // use jQuery to update the placeholder. It will execute any JavaScript statements
          $(placeholder).html(html);
  
          // return false to prevent the automatic update of the placeholder
          return false;
      }
  &lt;/script&gt;
  &lt;%: Ajax.ActionLink("Show popup", "Popup", new AjaxOptions { UpdateTargetId = "popup", OnSuccess = "updatePlaceholder" })%&gt;
  &lt;div id="popup" style="visibility: hidden"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>HomeController.cs</strong></p>
  
  <pre><code>public ActionResult Popup() {
          return PartialView("PopupControl");
      }
  </code></pre>
  
  <p><strong>PopupControl.ascx</strong></p>
  
  <pre><code>&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;dynamic&gt;" %&gt;    
  &lt;script src="../../Scripts/jquery.bgiframe-2.1.2.js" type="text/javascript" /&gt;
  &lt;script src="../../Scripts/jquery.ui.core.js" type="text/javascript" /&gt;
  &lt;script src="../../Scripts/jquery.ui.widget.js" type="text/javascript" /&gt;
  &lt;script src="../../Scripts/jquery.ui.mouse.js" type="text/javascript" /&gt;
  &lt;script src="../../Scripts/jquery.ui.draggable.js" type="text/javascript" /&gt;
  &lt;script src="../../Scripts/jquery.ui.position.js" type="text/javascript" /&gt;
  &lt;script src="../../Scripts/jquery.ui.resizable.js" type="text/javascript" /&gt;
  &lt;script src="../../Scripts/jquery.ui.dialog.js" type="text/javascript" /&gt;
  &lt;script src="../../Scripts/jquery.ui.core.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.ui.datepicker.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
  
          $("#dialog:ui-dialog").dialog("destroy");
  
          $("#dialog-modal").dialog({
              height: 250,
              width: 450,
              modal: true
          });
  
          $("#dateFrom").datepicker({
              showOn: "button",
              buttonImage: "../../Content/Images/calendar.gif",
              buttonImageOnly: true,
              showButtonPanel: true
          });
          $("#dateTo").datepicker({
              showOn: "button",
              buttonImage: "../../Content/Images/calendar.gif",
              buttonImageOnly: true,
              showButtonPanel: true
          });
      });
  &lt;/script&gt;
  &lt;div id="dialog-modal" title="My popup"&gt;
      &lt;% using (Html.BeginForm("PopupClosed", "Home")) { %&gt;
      &lt;div class="search-table"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td class="col1"&gt;
                      &lt;p&gt;
                          Valid from:
                      &lt;/p&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" id="dateFrom" name="From" style='width: 100px;' /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="col1"&gt;
                      &lt;p&gt;
                          Valid to:
                      &lt;/p&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" id="dateTo" name="To" style='width: 100px;' /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="col1"&gt;
                  &lt;/td&gt;
                  &lt;td align="right"&gt;
                      &lt;input class="search-button" name="" type="submit" value="Go" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;% } %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance,
  Leszek</p>
  
  <p><strong>SOLUSION</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          $("#dialog-modal").dialog({
              height: 300,
              width: 450,
              modal: true,
              resizable: false,
              create: function(event, ui) {
                  $("#dateFrom").datepicker({
                      showOn: "button",
                      buttonImage: "@Url.Content("~/Content/Images/calendar.gif")",
                      buttonImageOnly: true,
                      showButtonPanel: true
                  });
                  $("#dateTo").datepicker({
                      showOn: "button",
                      buttonImage: "@Url.Content("~/Content/Images/calendar.gif")",
                      buttonImageOnly: true,
                      showButtonPanel: true
                  });
              },
              close: function(event, ui) {
                  $("#dateFrom").datepicker("destroy");
                  $("#dateTo").datepicker("destroy");
  
                  $("#ui-datepicker-div").remove();
                  $(".ui-dialog").remove();
                  $("#dialog-modal").remove();
              }
          });
      });
  &lt;/script&gt;
  </code></pre>