JQuery UI对话框模式表单在AJAX应用程序中缓存旧值

Question

我在使用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,它存在于母版页中,并与内容异步加载.

Answer 1

根据我的代码解释,您实际上并没有删除以前的表单.您只是从中删除对话框.

该方法描述为:

完全删除对话框功能.这将使元素返回到其初始化前状态.

意思是它仍然存在.

试试这个(注意$ ('#divForm').remove();):

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

Answer 2

用我的解决方案我正在使用

对话框('destroy')代替对话框('close')