Why is the dom out of sync after jquery ajax call and refresh?

Question

I have table that uses inline editing with ajax to modify the fields. The table is sorted by last name.

If I change a last name so the row order is changed and then do a page refresh, the table is reordered but the field I changed still has the previous value in the dom. The input field does have the correct value in the html but the dom value is displayed.

A hard refresh, of course, displays all the correct values.

Why is my DOM out of sync? How can I get refresh to display the correct value?

---

Edit after responses

It was Firefox retaining the previous value for the input fields. After poking around on the web, I found that adding <form autocomplete="off"> will force Firefox to not cache the old value.

Answer 1

Almost certainly has to do with your browser retaining form values through the refresh. Is it possible for you to arrange it so that on refresh, the trigger you are using to update the DOM from the input field is triggered again?

Hard to give more detail without knowing how your DOM and your input fields are interacting in the code.

Answer 2

I think the browser is caching the previous values for the form field (which sucks). What is really frustrating is that if I change multiple items, it's almost impossible to figure out whether the value attribute is right or the text in the field is right (since it can go either way).

I am really surprised you are using ajax but don't have an auto sort/auto refresh button.

For the short term, you should use sortable tables to avoid users getting confused if they are on the page.

In the long term, you should go with a solution I'm working on for a very similar issue...

Have the data stored (ajax it to the server, server stores it in DB), have the table always have the value fields set server-side from the DB, and on page load, have a js script that loops through all of the input elements and manually sets the value of the field from the value attribute, something like:

$("table :input").each(
     $(this).value($(this.attr("value")));
);