javascript JQuery UI 对话框模态表单在 AJAX 应用程序中缓存旧值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6284838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI dialog modal form caching old values in AJAX application
提问by Lee D
I am having a major headache using a form in a modal dialog with JQuery UI. The dialog is displayed when the user clicks on a link. The first time the form is opened, it works fine; the form is submitted to the server, the containing page is updated via AJAX, and the dialog closes. However, subsequent attempts to use the form are where the problems start.
在带有 JQuery UI 的模态对话框中使用表单时，我感到非常头疼。当用户单击链接时会显示该对话框。第一次打开表单时，它工作正常；表单提交到服务器，包含页面通过 AJAX 更新，对话框关闭。但是，随后尝试使用该表单是问题开始的地方。
On the second attempt to use it, the form is submitted with the values from the previoussubmission, despite the page content being updated. This happens even if I navigate to a different screen in the application and then return. The content of the page which is re-rendered after each submission includesthe form which makes up the dialog, so the 'old' values which are being submitted no longer even existin the page markup. They are being somehow 'remembered' by JQuery UI. I don't know how to work around this behaviour and it's driving me crazy.
在第二次尝试使用它时，尽管页面内容正在更新，但仍会使用上次提交的值提交表单。即使我导航到应用程序中的不同屏幕然后返回，也会发生这种情况。每次提交后重新呈现的页面内容包括构成对话框的表单，因此正在提交的“旧”值甚至不再存在于页面标记中。JQuery UI 以某种方式“记住”了它们。我不知道如何解决这种行为，这让我发疯。
How can I make the JQuery dialog forget about previous form submissions when the content is updated?
当内容更新时，如何让 JQuery 对话框忘记以前的表单提交？
I am using JQuery UI 1.7.2 with JQuery 1.3.2, and the application is built in ASP.NET MVC 3 (although I don't believe there is any problem server-side). I would prefer not to have to update the version of JQuery I'm using.
我将 JQuery UI 1.7.2 与 JQuery 1.3.2 一起使用，并且该应用程序是在 ASP.NET MVC 3 中构建的（尽管我认为服务器端没有任何问题）。我不想更新我正在使用的 JQuery 版本。
Relevant JavaScript:
相关 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');
}
}
Here is the markup of the form and it's containing div. This is what is reloaded into the page after submission (a PartialViewResult) with the new values for txtDate, txtTime and hdnId. These are the inputs which are having their old values retained.
这是表单的标记，它包含 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 is an empty div which lives in a master page and is loaded asynchronously with content.
divContent 是一个空的 div，它位于母版页中并与内容异步加载。
采纳答案by Niklas
From what I could interpret from your code, you are not actually removing the previous forms. You are just removing the dialog from them.
从我可以从您的代码中解释的内容来看，您实际上并没有删除以前的表单。您只是从它们中删除对话框。
The method is described as:
该方法描述为：
Remove the dialog functionality completely. This will return the element back to its pre-init state.
完全删除对话框功能。这将使元素返回到它的预初始化状态。
Meaning its still there.
意思是它还在那里。
Try this (note the $('#divForm').remove();):
试试这个（注意 $ ('#divForm').remove();）：
$.post('/Item/Save', postData, function (response, status) {
$('#divForm').remove();
$('#divContent').html(response); //response mark up contains a new 'divForm' element
}, 'html');
}
回答by Grey Wolf
With my solution i'm using
使用我的解决方案
dialog('destroy') instead dialog('close')
dialog('destroy') 代替 dialog('close')
