Databases
StackOverflow2013
Postsdbo
POJQuery UI dialog modal form caching old values in AJAX application
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery UI dialog modal form caching old values in AJAX application
    primarykey
    data
    text
    <p>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> <p>On the second attempt to use it, the form is submitted with the values from the <em>previous</em> 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 <em>includes</em> the form which makes up the dialog, so the 'old' values which are being submitted no longer even <em>exist</em> 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.</p> <p>How can I make the JQuery dialog forget about previous form submissions when the content is updated?</p> <p>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.</p> <p>Relevant JavaScript:</p> <pre><code>//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'); } } </code></pre> <p>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.</p> <pre><code>&lt;div id="divForm" class="admPanel hidden"&gt; &lt;form id="frmAddNew" action="/Item/Save" method="post"&gt; &lt;input id="hdnId" name="UserId" type="hidden" value="3"&gt; &lt;div&gt; &lt;label for="txtDate"&gt;Admin Date:&lt;/label&gt; &lt;input id="txtDate" name="AdministrationDateTime" type="text" value="8 Jun 2011"&gt; &lt;br&gt; &lt;label for="txtTime"&gt;Admin Time:&lt;/label&gt; &lt;input id="txtTime" name="AdministrationDateTime.Time" type="text" value="21:45"&gt; &lt;br&gt; &lt;label&gt;Outcome:&lt;/label&gt; &lt;input id="txtOutcome" name="AdministrationOutcome" type="text" value=""&gt; &lt;br&gt; &lt;/div&gt; &lt;/form&gt; &lt;p&gt; &lt;input class="buttonNormal" id="btnSave" onclick="save();" type="button" value="Save"&gt; &lt;/p&gt; </code></pre> <p></p> <p>divContent is an empty div which lives in a master page and is loaded asynchronously with content.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLee D
    1. USLee D
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJQuery UI dialog modal form caching old values in AJAX application
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJQuery UI dialog modal form caching old values in AJAX application
      1. USzynaps
      1. VTFavorite
    3. VO
      singulars
      1. POJQuery UI dialog modal form caching old values in AJAX application
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you share your markup please, specifically #divForm, #divContent and the $.post response. And if #frmAddNew isn't in #divform, share that as well.
      singulars
      1. POJQuery UI dialog modal form caching old values in AJAX application
      1. USNiklas
    2. COSure, edited the question.
      singulars
      1. POJQuery UI dialog modal form caching old values in AJAX application
      1. USLee D
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload