title: jQuery UI DatePicker Hangs on second call
body: <p>I'm creating an ASP.NET MVC3 app that uses jQuery Datepicker and Timepicker inside a dialog. The code is pretty simple, just localization:</p>
  
  <pre><code>$(document).ready(function () {
      $('.datepicker').datepicker({
          dateFormat: "dd/mm/yy",
          monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
          dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
          dayNamesMin:['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
      });
  
      $('.timepicker').timepicker({
          timeOnlyTitle: 'Titulo',
          timeText: 'Tempo',
          hourText: 'Hora',
          minuteText: 'Minuto',
          secondText: 'Segundo',
          currentText: 'Atual',
          closeText: 'Fechar'
      }); 
  });
  </code></pre>
  
  <p>No secret here.</p>
  
  <p>The datepicker works fine when used for the first time. When I used a second time, the browser (any browser) hangs and offers me to stop script execution of jquery-1.6.4.min.js. To reproduce the error, I just reload the whole page.</p>
  
  <p>What am I missing here?</p>
  
  <p><strong>Update</strong></p>
  
  <p>Adding code for the modal:</p>
  
  <p>First, I configure that everything with class='modal' will have some basic parameters:</p>
  
  <pre><code>$('.modal').dialog({
      resizable: false,
      draggable: false,
      modal: true,
      position: 'center',
      autoOpen: false
  });
  </code></pre>
  
  <p>Then, I extend jQuery with some functions. One of them sets the buttons and submits:</p>
  
  <pre><code>$.extend({
      modalPopup: function (modal) {
          var $modal = $('#' + modal);
          var $form = $modal.find('form').first();
  
          $modal.dialog({
              buttons: {
                  "OK": function (e) {
                      $.validator.unobtrusive.parse($form);
                      if ($form.valid()) {
                          $('.ui-dialog button:contains("OK")').button('disable');
                          $.post($form.attr('action'),
                          $form.serialize(),
                          function (data) {
                              $modal.dialog('close');
                              $('#maindiv').load(telaAtual);
                          });
                      }
                  },
                  "Cancelar": function () { $(this).dialog("close"); }
              },
              open: function () {
                  $modal.unbind('submit');
                  $modal.submit(function () {
                  $modal.parents('.ui-dialog').first().find('.ui-button').first().click();
                  return false;
              });
  
              $(this).find('.ui-dialog :input').first().blur();
          }
      })
      .dialog('open');
  }
  </code></pre>
  
  <p>})</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I did some research and found that the problem is with DatePicker and Ajax. Everytime Maybe the Datepicker is "double called" everytime an ajax call is made. Something very similar to <a href="https://stackoverflow.com/questions/520645/jquery-datepicker-ms-ajax-updatepanel-doesnt-work-after-post-back">this question</a>. But the Datepicker hangs even if I just close the dialog, meaning that the problem starts when the first ajax call is made.</p>
  
  <p>Anyone can help me to fix this? Maybe returning false somewhere or destroying the datepicker before creating a new one.</p>
  
  <p><strong>UPDATE 01/12/2012</strong></p>
  
  <p>Sorry for the delay, guys and thanks for the help.
  None of the solutions posted here worked. But, again, I thank you all for the help.</p>
  
  <p>I found a boolean property <strong>$.datepicker.initialized</strong> that returns false on the first time I load the dialog, and returns true the second time. Now I can avoid the crash the second time. First problem solved.
  But I still don't know how to "reinitialize" the datepicker so it can be shown when the textbox is clicked.</p>
  
  <p>Still looking for a way to reinitialize it.</p>
  
  <p>Also, changed the OK button code to this and works fine:</p>
  
  <pre><code>"OK": function (e) {
                  $.validator.unobtrusive.parse($form);
                  if ($form.valid()) {
                      $modal.parents('.ui-dialog').find('button:contains("OK")').button('disable');
                      $.post($form.attr('action'),
                          $form.serialize(),
                          function (data) {
                              if (submodal) {
                                  carregaParcial(titulo, id);
                              }
                              else {
                                  $('#maindiv').html(data);
                              }
                              removeModal($modal);
                          });
                  }
  </code></pre>
  
  <p>The <em>$form.serialize()</em> function already returns the html in the <em>data</em> variable, so, I just need to get its content and set as HTML of the maindiv.</p>