在AJAX应用程序JQuery用户界面对话框模式窗体缓存旧值 [英] JQuery UI dialog modal form caching old values in AJAX application

问题描述

我有在与jQuery UI模态对话框使用窗体一个大难题。当用户点击一个链接将显示对话框。第一次打开表单，它工作正常;该表单提交到服务器，包含页面通过AJAX更新，并且对话框关闭。但是，后续尝试使用的形式问题开始的地方。

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.

在第二次尝试使用它，形式是从的 $ P $提交的价值观pvious 的提交，尽管页面内容进行更新。发生这种情况即使我导航到不同的屏幕中的应用程序，然后返回。这是每次提交后重新渲染页面内容的包括的形式，其拼成的对话框，因此它正在提交不再是'老'的值甚至存在的在页面标记。他们被莫名其妙的jQuery UI想起。我不知道如何解决此问题和它的驾驶我疯了。

On the second attempt to use it, the form is submitted with the values from the previous submission, 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 includes the form which makes up the dialog, so the 'old' values which are being submitted no longer even exist in 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的对话框忘掉previous表单提交时，内容更新？

How can I make the JQuery dialog forget about previous form submissions when the content is updated?

我使用JQuery UI 1.7.2使用jQuery 1.3.2，而应用程序是建立在ASP.NET MVC 3（虽然我不相信有任何问题，服务器端）。我想preFER不会有更新的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.

相应的JavaScript：

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

下面是形式的标记，它的含股利。这是提交的资料（一PartialViewResult）与txtDate，txtTime和hdnId新的值之后是什么重新加载到页面。这些是有他们的旧值保留的投入。

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 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它生活在一个母版页，并异步加载与内容。

divContent is an empty div which lives in a master page and is loaded asynchronously with content.

推荐答案

据我可以从你的code除preT，你实际上并没有拆除previous形式。你只是从他们删除的对话框。

From what I could interpret from your code, you are not actually removing the previous forms. You are just removing the dialog from them.

的方法，被描述为：

删除对话框功能   彻底。这将返回   元素恢复到pre-init状态。

Remove the dialog functionality completely. This will return the element back to its pre-init state.

其意义仍然存在。

试试这个（注意$ （'＃divForm）删除（）; ）：

Try this (note the $('#divForm').remove();):

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

这篇关于在AJAX应用程序JQuery用户界面对话框模式窗体缓存旧值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！