JQuery UI диалоговое окно модальной формы, кэширующее старые значения в приложении AJAX

Question

У меня сильная головная боль при использовании формы в модальном диалоговом окне с пользовательским интерфейсом JQuery. Диалог отображается, когда пользователь нажимает на ссылку. При первом открытии форма работает нормально; форма отправляется на сервер, содержащая ее страница обновляется через AJAX, и диалоговое окно закрывается. Тем не менее, последующие попытки использовать форму, где проблемы начинаются.

При второй попытке его использования форма отправляется со значениями из предыдущей отправки , несмотря на обновление содержимого страницы. Это происходит, даже если я перехожу на другой экран в приложении и затем возвращаюсь. Содержимое страницы, которое перерисовывается после каждой отправки , включает форму, из которой состоит диалог, поэтому «старые» значения, которые отправляются, больше не существуют даже в в разметка страницы. Они как-то «запоминаются» пользовательским интерфейсом JQuery. Я не знаю, как обойти это поведение, и это сводит меня с ума.

Как заставить диалоговое окно 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

С моим решением я использую

диалог («уничтожить») вместо диалога («закрыть»)