Question

This is a bit long to explain, so I’ll try to keep it short:

I’m submitting a form and returning a list of users, then emptying a and repopulating it with the returned users. This works as expected until after I add a user and then browse to another page, then go back to the previous page, it’s loading the list of users that was there before adding the new user. If I refresh, the user list is correctly displaying the list of users again.

Some pseudo code:

... function to add a user, then return success ...
$("ul#userTab").empty();
for(user in data['users']){
    $("ul#userTab").append("<li>"+user+"</li>");
}

It seems as though the browser is caching the first page load once I use the back button, but I don’t really know. Any help is appreciated.

EDIT: To clarify, I’m sending data to the server, saving it in the database, then returning the users from the database. I’m not just adding an arbitrary value to the page then reloading and wondering why it’s not there.

Answer 1

The browser is not going to maintain the DOM which you manipulate between page redirects. You have to use any history management plugin or using iframe to maintain the state of the page between page redirects.

Take a look at some of the links below, these might help you

http://www.asual.com/jquery/address/

http://benalman.com/projects/jquery-bbq-plugin/

http://plugins.jquery.com/project/history

http://benalman.com/projects/jquery-hashchange-plugin/

http://code.google.com/p/reallysimplehistory/