Problem with modifying a page with ajax, and the browser keeping the unmodified page in cache.

views:

answers:

+4 Q:

Problem with modifying a page with ajax, and the browser keeping the unmodified page in cache.

Hey there,

I have a situation where my page loads some information from a database, which is then modified through AJAX.

I click a link to another page, then use the 'back' button to return to the original page.

The changes to the page through AJAX I made before don't appear, because the browser has the unchanged page stored in the cache.

Is there a way of fixing this without setting the page not to cache at all?

Thanks :)

+1 A:

Imagine that each request to the server for information, including the initial page load and each ajax request, are distinct entities. Each one may or may not be cached anywhere between the server and the browser.

You are modifying the initial page that was served to you (and cached by the browser, in most cases) with arbitrary requests to the server and dynamic DOM manipulation. The browser has to capacity to track these changed.

You will have to maintain state, maybe using a cookie, in order to reconstruct the page. In fact, it seems to me that a dynamically generated document that you may wish to move to and from should definitely have a workflow defined that persists and retrieves it's state.

Perhaps set a cookie for each manipulated element with the key that was sent to the server to get the data?

Sky Sanders 2010-05-23 04:48:27

So, do you mean storing each change to elements of a page in a cookie, and using JS to reload those changes if the page is returned to?

David Lawson 2010-05-23 04:55:02

@David If you design your code in such a way that a particular input results in a specific output you can simply store the keys. For instance - the user is looking at a nice formatted list or grid composed of a rich set of details about a number of real estate properties. The user has spent time compiling this list of information so losing it would probably lessen the value of your site. Write your code so that you can build the list an item at a time using only the primary key of the listing. Then, whenever the list is modified, you simply persist a list of keys [233,2235,25235,23]

Sky Sanders 2010-05-23 05:08:31

in a cookie and when ever your script loads, just check for that cookie. If it is present then you know you should rebuild the list by calling the server and retrieving and displaying the data for each item in the list. Does that make sense? I may be more effort but your code will be smarter and you will get more done in the long run. There are actually a lot of ajax controls, say, jquery plugins, that are already able to maintain state using cookies. Most any grid worth it's salt can survive a page cycle using the strategy i just described. Anyway - good luck.

Sky Sanders 2010-05-23 05:11:56

Yes, it does make sense, but I guess I haven't been descriptive about what my application does/needs this for.What my code does is: through AJAX, it allows users to add pages to the website, sort of like a CMS/wiki. The added page then appears in the list of pages on the user's screen. When a user navigates to another page and then uses the 'back' button to return, the list of pages is now outdated.

David Lawson 2010-05-24 06:54:50

To apply your solution, would I just store the extra created items (only link+text) in a cookie, then load them back when I reload the page? How would I track what to load back and what appears already?I think in my case, content is going to be updated so much (any user can create pages) that the page shouldn't be cached anyway?

David Lawson 2010-05-24 06:55:19

ansaurus

tags:

views:

answers:

Problem with modifying a page with ajax, and the browser keeping the unmodified page in cache.

related questions