Question

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.

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.

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

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.

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

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 is an empty div which lives in a master page and is loaded asynchronously with content.

Answer 1

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();):

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