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

}）

更新

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

任何人都可以帮我解决这个问题吗？也许在某个地方返回false或在创建新的之前销毁datepicker。

更新01/12/2012

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

我找到了一个布尔属性 $ .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

Answer 1

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

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

Answer 2

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

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

将其更改为：

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

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

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

Answer 3

只是猜测，而不是答案：

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

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

也许这有帮助？

BTW：通过打开对话框点击“确定”按钮，不是吗？

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

然后加载一些内容，以便在对话框打开时发生？

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

如果telaAtual返回的内容会再次打开对话框，那么你可能会陷入无休止的循环中？

Answer 4

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

Answer 5

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

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

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

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

5 个答案: