JQueryUI对话框模式表单缓存AJAX应用程序中的旧值

JQuery UI dialog modal form caching old values in AJAX application

本文关键字：应用程序 AJAX 对话框 模式 表单 缓存 JQueryUI      更新时间：2023-09-26

在使用JQuery UI的模式对话框中使用表单时，我非常头疼。当用户单击链接时，将显示该对话框。第一次打开表单时，它运行良好；表单被提交到服务器，包含的页面通过AJAX更新，对话框关闭。然而，随后尝试使用该表单是问题的开始。

在第二次尝试使用时，尽管页面内容正在更新，但表单还是使用上一次提交的值提交。即使我导航到应用程序中的另一个屏幕，然后返回，也会发生这种情况。每次提交后重新呈现的页面内容包括构成对话框的表单，因此正在提交的"旧"值在页面标记中甚至不再存在。JQuery UI以某种方式"记住"了它们。我不知道如何处理这种行为，这让我抓狂。

更新内容时，如何使JQuery对话框忘记以前提交的表单？

我使用JQuery UI 1.7.2和JQuery 1.3.2，并且该应用程序是在ASP.NET MVC 3中构建的（尽管我认为服务器端没有任何问题）。我不想更新我正在使用的JQuery版本。

相关JavaScript:

//shows dialog containing form; triggered by clicking a hyperlink
function showForm() {    
    $('#divForm').dialog({
        modal: true,
        draggable: false,
        resizable: false,
        title: summary,
        width: 400
    });
}
//submits the form; triggered by clicking 'Save' button from the dialog
function save() {
    var postData = $('#frmAddNew').serialize();
    $.post('/Item/Save', postData, function (response, status) {
            $('#divForm').dialog('destroy');
            $('#divContent').html(response); //response mark up contains a new 'divForm' element
        }, 'html');
    }
}

这是表单的标记，它包含div。这是提交后重新加载到页面中的内容（PartialViewResult），其中包含txtDate、txtTime和hdnId的新值。这些是保留其旧值的输入。

<div id="divForm" class="admPanel hidden">
<form id="frmAddNew" action="/Item/Save" method="post">
    <input id="hdnId" name="UserId" type="hidden" value="3">
    <div>
        <label for="txtDate">Admin Date:</label>
        <input id="txtDate" name="AdministrationDateTime" type="text" value="8 Jun 2011">
        <br>
        <label for="txtTime">Admin Time:</label>
        <input id="txtTime" name="AdministrationDateTime.Time" type="text" value="21:45">
        <br>
        <label>Outcome:</label>
    <input id="txtOutcome" name="AdministrationOutcome" type="text" value="">
        <br>
    </div>
</form>
<p>
    <input class="buttonNormal" id="btnSave" onclick="save();" type="button" value="Save">
</p>

divContent是一个空的div，它位于母版页中，与内容异步加载。

根据我从您的代码中可以解释的，您实际上并没有删除以前的表单。您只是将对话框从它们中删除。

该方法描述为：

删除对话框功能彻底地这将返回元素返回到其初始前状态。

意味着它还在那里。

试试这个（注意$('#divForm').remove();）：

 $.post('/Item/Save', postData, function (response, status) {
            $('#divForm').remove();
            $('#divContent').html(response); //response mark up contains a new 'divForm' element
        }, 'html');
    }

对于我的解决方案，我使用

对话框（"关闭"）

相关文章：