jQuery UI DatePicker在第二次调用时挂起

Question

我正在创建一个ASP.NET MVC3应用程序,它在对话框中使用jQuery Datepicker和Timepicker.代码非常简单,只需本地化:

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

这里不是秘密.

第一次使用时,datepicker工作正常.当我第二次使用时,浏览器(任何浏览器)挂起并让我停止jquery-1.6.4.min.js的脚本执行.要重现错误,我只需重新加载整个页面.

我在这里错过了什么？

更新

为模态添加代码:

首先,我配置class ='modal'的所有内容都有一些基本参数:

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

然后,我用一些函数扩展jQuery.其中一个设置按钮和提交:

$.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

我做了一些研究,发现问题出在DatePicker和Ajax上.每次可能每次进行ajax调用时,Datepicker都会被"双重调用".与这个问题非常相似的东西.但即使我关闭对话框,Datepicker也会挂起,这意味着在第一次ajax调用时问题就会出现.

有人可以帮我解决这个问题吗？也许在某处返回false或在创建新的之前销毁datepicker.

更新01/12/2012

抱歉延迟,伙计们,感谢您的帮助.这里发布的解决方案都没有奏效.但是,我再次感谢大家的帮助.

我找到了一个布尔属性$ .datepicker.initialized,它在我第一次加载对话框时返回false,并在第二次返回true.现在我可以第二次避免崩溃了.第一个问题解决了 但我仍然不知道如何"重新初始化"日期选择器,以便在单击文本框时显示它.

仍在寻找重新初始化的方法.

此外,将确定按钮代码更改为此并正常工作:

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

在$ form.serialize()函数已经返回了在html的数据变量,所以,我只需要得到它的内容,并设置为maindiv的HTML.

Answer 1

提交对话框或取消对话框时,请尝试使用此jquery datetimepicker函数.

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

Answer 2

您错误地使用了“load”方法来达到您的目的。当没有传递选择器时，load 方法的 jQuery 默认行为是转到指定的 URL，执行该页面上存在的 JavaScript，然后将 DOM 加载到调用它的 jQuery 对象中。

如果将选择器传递到加载方法中，则 jQuery 加载方法将不会执行脚本，而只会加载 jQuery 对象中的 dom。

将其更改为：

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

这假设您的“telaAtual”URL 在页面上有#maindiv，然后获取其所有子项并将它们加载到“#maindiv”jQuery 对象中。

我们可以进一步了解悬挂的细节，但解决负载问题将是首先要考虑的问题。如果它继续挂起，则值得进一步调查。