jQuery UI DatePicker Hangs on second call

Question

I'm creating an ASP.NET MVC3 app that uses jQuery Datepicker and Timepicker inside a dialog. 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 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.

What am I missing here?

Update

Adding code for the 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 submits:

$.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 Maybe the Datepicker is "double called" everytime an ajax call is made. Something very similar to this question. But the Datepicker hangs even if I just close the dialog, meaning that the problem starts when the first ajax call is made.

Anyone can help me to fix this? Maybe returning false somewhere or destroying 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 the help.

I found a boolean property $.datepicker.initialized 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.

Still looking for a way to reinitialize it.

Also, changed the OK button code to this and 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 the html in the data variable, so, I just need to get its content and set as HTML of the maindiv.

"Inside a dialog". Can you test the same code outside of any dialogs? — peterfoldi, Nov 08 '11 at 13:18
Then include that code too for us, the issue is not in the date or timepicker, but somewhere in the collaboration between these and the dialog. — peterfoldi, Nov 08 '11 at 14:06
It is the same code. The 'telaAtual' variable holds the URL to load. Same code for the html/view/c#. Just without the dialog. — programad, Nov 10 '11 at 20:00
Stop calling your code twice using the load method. Pass in a selector. Did you try that? — King Friday, Dec 21 '11 at 16:35
Have you checked your `telaAtual` page to see if its not outputting any scripts to the ajax call. As emeraldcode said, try using a selector to filter some data and use only the necessary for the input in the destination `DIV`: `$('#maindiv').load(telaAtual + '#conteudoAjax');` and you have to wrap the desired output in an element with this ID `conteudoAjax` — Ricardo Souza, Dec 22 '11 at 21:37
hi, is this one answered? Was wondering if you ever found out the issue. — King Friday, Jan 03 '12 at 01:52
This is a problem on the final test for graduation. I have no time to code it right now, but this month the I will return to work on this project and test every answer here and define it answered. Thanks for the help. — programad, Jan 04 '12 at 10:54

score 5 · Answer 1 · answered Dec 21 '11 at 04:55

5

Try this jquery datetimepicker function when submit the dialog or cancel the dialog.

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

answered Dec 21 '11 at 04:55

Talha

18,898
8
49
66

King Friday · Accepted Answer · 2011-12-24T08:25:42.523

You are using the "load" method incorrectly for your purposes. jQuery default behavior for load method when no selector is passed is to go to the URL specified, execute the JavaScript that exists on that page then load in the DOM into the jQuery object calling it.

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

Change it to:

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

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

We can go further and find out the particulars of the hanging but solving the load issue will be the first thing to consider. If it continues hanging it is worth further investigation.

score 2 · Answer 3 · answered Dec 16 '11 at 02:12

Just a guess, not an answer:

Try to remove the dialog, not just close it.

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

Maybe that helps?

BTW: With this you are clicking on the "OK" button by opening the dialog, don't you?

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

And then you load some content, so that happens when the dialog is opening?

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

And if the telaAtual returns content which will open the dialog again, you are maybe stucked in an endless loop?

score 1 · Answer 4 · answered Nov 08 '11 at 13:02

1

In this code the only very minor syntax issue might be the last unnecessary comma after the dayNamesMin. Shouldn't cause any hanging, but remove it and give it a try. Other than that this code looks fine, so the issue is somewhere else.

answered Nov 08 '11 at 13:02

peterfoldi

7,451
5
21
19

Just tested and it is not the unnecessary comma. But what I am pissed is that there is no debug info to help find the error on the Javascript console or elsewhere. Maybe someone has had the same problem. – programad Nov 08 '11 at 13:09
I got the same problem under IE9 only – NoWar Dec 15 '11 at 23:18

score 0 · Answer 5 · edited Sep 28 '12 at 08:55

0

I've the same issue here, and in my case, that solution worked:

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

I just assign a random string to datepicker's input ID.

edited Sep 28 '12 at 08:55

Mihai Iorga

39,330
16
106
107

answered Aug 16 '12 at 12:39

Gabriel

1

jQuery UI DatePicker Hangs on second call

5 Answers5