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.

Answer 1

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.