JQuery DatePicker user interface freezes on second call

Question

I am creating an ASP.NET MVC3 application that uses jQuery Datepicker and Timepicker inside a dialog box. The code is pretty simple, just localization:

$(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' }); }); 

No secret here.

The date sensor works great when used for the first time. When I used it a second time, the browser (any browser) freezes up and offers me to stop jquery-1.6.4.min.js script execution. To reproduce the error, I simply reload the entire page.

What am I missing here?

Update

Adding code for modal:

First, I configure that everything with class = 'modal' will have some basic parameters:

 $('.modal').dialog({ resizable: false, draggable: false, modal: true, position: 'center', autoOpen: false }); 

Then I extend jQuery with some functions. One of them sets the buttons and sends:

 $.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'); } 

})

UPDATE

I did some research and found that the problem is with DatePicker and Ajax. Everytime It is possible that the Datepicker is "called twice" every time an ajax call is made. Something very similar to this question . But the Datepicker freezes even if I just close the dialog box, which means the problem starts when the first ajax call is made.

Can anyone help me fix this? Perhaps someday we will return to false or destroy the datepicker before creating a new one.

UPDATE 01/12/2012

Sorry for the delay guys and thanks for the help. None of the solutions posted here worked. But, again, I thank you all for your help.

I found the boolean property $. datepicker.initialized , which returns false the first time the dialog starts and returns true a second time. Now I can avoid collapse a second time. The first problem is resolved. But I still don't know how to “reinitialize” the datepicker so that it can be displayed when the text field is clicked.

Looking for a way to reinitialize.

In addition, I changed the OK button code to this and it works fine:

 "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); }); } 

The $ form.serialize () function already returns html in the data variable, so I just need to get its contents and set it as HTML from maindiv.

Answer 1

You are not using the load method properly for your purposes. The jQuery default behavior for the load method in the absence of a selector is to go to the specified URL, execute the JavaScript that exists on this page, and then load it into the DOM into the jQuery object that calls it.

If you pass the selector to your loading method, the jQuery loading method will not execute the script and will only load dom into the jQuery object.

Change it to:

 $('#maindiv').load(telaAtual + ' #maindiv > *') 

This assumes that your telaAtual URL has #maindiv on the page, and then gets all its children and loads them into the jQuery "#maindiv" object.

We can go further and find out the features of the hanging, but solving the load problem is the first thing to consider. If it continues to hang, it deserves further study.

Answer 2

Try using this jquery datetimepicker function when sending a dialog or canceling a dialog.

  $('.datepicker').datepicker("destroy"); 

Answer 3

Just an assumption, not an answer:

Try remove the dialog, not just close it.

 ... $modal.dialog('close'); $modal.remove(); ... 

Maybe this helps?

---

BTW: in doing so, you click the "OK" button, opening a dialog box, right?

 $modal.parents('.ui-dialog').first().find('.ui-button').first().click(); 

And then you download some content, so what happens when the dialog opens?

 $('#maindiv').load(telaAtual); 

And if telaAtual returns content that opens the dialog again, are you possibly stuck in an infinite loop?

Answer 4

In this code, the only very minor syntax issue may be the last unnecessary comma after dayNamesMin. You should not cause a freeze, but remove it and try. Other than that, this code looks great, so the problem is somewhere else.

Answer 5

I have the same problem and in my case this solution worked:

http://forum.jquery.com/topic/datepicker-in-modal-dialog-problem-with-populating-a-date-field

I just assign a random string to the datepicker input id.