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

【问题标题】：jQuery UI DatePicker Hangs on second calljQuery UI DatePicker 在第二次调用时挂起
【发布时间】：2011-11-08 12:22:00
【问题描述】：

我正在创建一个在对话框中使用 jQuery Datepicker 和 Timepicker 的 ASP.NET MVC3 应用程序。代码很简单，就是本地化：

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

这里没有秘密。

第一次使用日期选择器时可以正常工作。当我第二次使用时，浏览器（任何浏览器）挂起并让我停止执行 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');
}

})

更新

我做了一些研究，发现问题出在 DatePicker 和 Ajax 上。每次进行 ajax 调用时，也许 Datepicker 都会被“双重调用”。与this question 非常相似的东西。但是即使我只是关闭对话框，Datepicker 也会挂起，这意味着问题在第一次 ajax 调用时就开始了。

谁能帮我解决这个问题？可能在某处返回 false 或在创建新的日期选择器之前销毁它。

2012 年 1 月 12 日更新

抱歉耽搁了，伙计们，感谢您的帮助。此处发布的解决方案均无效。但是，再次感谢大家的帮助。

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

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

另外，将 OK 按钮代码更改为此代码并正常工作：

"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() 函数已经返回 data 变量中的 html，所以，我只需要获取它的内容并设置为 maindiv 的 HTML .

【问题讨论】：

它是挂在所有浏览器中，还是只挂在一个浏览器中？
“在对话框中”。您可以在任何对话框之外测试相同的代码吗？
在 jQuery 对话框之外，似乎工作正常。
然后为我们也包含该代码，问题不在于日期或时间选择器，而在于它们与对话框之间的协作。
是同一个代码。 'telaAtual' 变量保存要加载的 URL。 html/view/c# 的代码相同。只是没有对话框。

标签： javascript jquery asp.net-mvc jquery-ui

【解决方案1】：

在提交对话框或取消对话框时试试这个jquery datetimepicker函数。

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

【讨论】：

【解决方案2】：

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

如果你将一个选择器传递给你的 load 方法，jQuery 的 load 方法将不会执行脚本，只会在你的 jQuery 对象中加载 dom。

改成：

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

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

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

【讨论】：

【解决方案3】：

只是猜测，不是答案：

尝试remove 对话框，而不仅仅是关闭它。

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

也许这有帮助？

顺便说一句：这样你打开对话框点击“确定”按钮，不是吗？

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

然后你加载一些内容，这样当对话框打开时就会发生这种情况？

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

如果telaAtual返回的内容会再次打开对话框，你可能会陷入死循环？

【讨论】：

【解决方案4】：

在这段代码中，唯一非常小的语法问题可能是 dayNamesMin 之后的最后一个不必要的逗号。不应该造成任何挂起，但将其移除并试一试。除此之外，这段代码看起来不错，所以问题出在其他地方。

【讨论】：

刚刚测试过，不是多余的逗号。但我很生气的是没有调试信息可以帮助在 Javascript 控制台或其他地方找到错误。也许有人遇到过同样的问题。
我只在IE9下遇到了同样的问题

【解决方案5】：

我在这里遇到了同样的问题，就我而言，该解决方案有效：

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

我只是为 datepicker 的输入 ID 分配一个随机字符串。

【讨论】：