Question

我希望你能帮助我。我一直在模态对话框中使用jquery datepicker。在开始出现一些问题后（由z-index给出）它运行得很好。问题是我在我的页面内容中不断通过div的.innerHTML属性进行修改。对于这种情况，我通过如下部分视图加载模态框的内容：

<div id = "newNotificationModalBox">
                <% Html.RenderAction("CreateNotification", "Notification"); %>
</div>

我有一个不提交表单的添加按钮，因为我对离开页面不感兴趣，它只是通过ajax调用来对数据库进行更改，并显示一个插入数据的表在右边。这将允许用户继续在数据库中插入行，直到他最终决定提交更改，因此将插入行。直到现在它工作正常，我打开对话框和日期选择器完美地工作。

问题出现在这种情况下。每当用户单击“添加”按钮，并且任何字段未正确填充时，我会从ajax调用中获取响应以显示错误：

var view = $.ajax({
            type: "POST",
            url: "/Suspension/CreateTemporalSuspension1SF1C",
            data: dataString,
            async: false

        });
///
///Checks if the input has been valid, if not it will go to this point
///
        document.body.innerHTML = view.responseText;

        $("#Calendar").datepicker('destroy');
        var dateoptions = { dateFormat: 'dd/mm/yy' };
        $("#Calendar").datepicker(dateoptions);

但是日历不再适用了。关于它为什么会这样发生的任何线索？我知道问题是当我通过修改innerHTML重新加载页面内容时，你知道任何类型的补丁吗？

Answer 1

如果您只需要显示来自服务器的错误消息，则不必使用innerHTML，因为正如您所猜测的那样，这会消灭您的日历。你可以只使用jQuery来操纵你的DOM结构。您可以决定为错误设置一个占位符div（最初会为空），然后您可以将一些内容（如果从服务器返回错误的情况）附加到该内容，稍后使用.empty（）删除添加的内容儿童div。占位符div甚至不需要在HTML中，但可以动态创建。我的观点是，我怀疑你可以通过操纵你的DOM结构并避免使用innerHTML擦除内容的副作用来轻松解决你的问题。

Answer 2

你试过了吗？

$(document.body).html(view.responseText);

而不是：document.body.innerHTML = view.responseText;

此外，您应该在使用响应替换之前销毁datepicker。

类似于：

var view = $.ajax({
            type: "POST",
            url: "/Suspension/CreateTemporalSuspension1SF1C",
            data: dataString,
            async: false

        });
///
///Checks if the input has been valid, if not it will go to this point
///
        $("#Calendar").datepicker('destroy');
        $(document.body).html(view.responseText);

        var dateoptions = { dateFormat: 'dd/mm/yy' };
        $("#Calendar").datepicker(dateoptions);

我同意Khnie的观点，你肯定应该使用div专门用于验证错误和消息，而不是替换整个body的内容。

datepicker的问题

2 个答案: