Ajax cache update

[housedouble]

If I load a page in Chrome it saves the page state after all scripts have finished so if I navigate away when I go back it looks just like the page without having to re-load.
This is fine however when I have used Ajax on that pages and it's contents are updated when I navigate away and go back again it doesn't save the changes it just goes back to how it looked when I first loaded it.

I am looking simply for a function which saves the new DOM state into what it cached.

Simply I want a function that updates the cached page onpageunload

 

[feherke]

Hi

[tt]history.pushState()[/tt] / [tt]window.onpopstate[/tt].

Feherke.

 

[housedouble]

Thank you.
That has certainly pointed me in the right direction.

Not what I was expecting though, I can only see it storing a variable (in my case an array of objects) that can be retrieved upon return to the page, which is great; however then the page must be drawn again after returning, using the restored array rather than the original, the biggest problem I can see straight away is I have multiple variables/arrays needed to build the page again to look like it was when they navigated away, I could re-write the way I store the variable data so it can be saved as one but that would be very time consuming.

Is this correct or am I making this harder than it should be.

Can I store the page DOM in the history.state and restore the DOM upon return?

 

[feherke]

Hi

The AJAX support was intended for storing and retrieving a state flag which describes the steps of the page changes. That status flag helps re-applying the changes as they were done, to obtain the previous state, not necessarily the previous content.

I mean, the state flag should mean "and then we loaded the details for X", so on popping that state you will issue an AJAX request to load those details for X again. And those details may be returned from the browser cache, in case no changes occurred on the server.

For what you described you could use [tt]localStorage[/tt]. Use the [tt]history.pushState()[/tt] / [tt]window.onpopstate[/tt] functions to handle the state flag and keep copies of the changed document in the [tt]localStorage[/tt] identified with the different state flag values.


Feherke.

 

[housedouble]

Thank you very much for the detailed reply, and so quick
I will soak in what you have said there.
I think some bigger re-writes of the way I use AJAX on my pages is in order for now, I noticed when I started a new project that if I'm fetching anything from the database via AJAX I should fetch nearly all of it that way keep my pages purely html.

With that in mind I will still look into localStorage, never heard the term before but the idea sounds useful across the board.

Thanks for the help.

Matt.

 

[jmeckley]

I noticed when I started a new project that if I'm fetching anything from the database via AJAX I should fetch nearly all of it that way keep my pages purely html.

the two are separate concepts. fetching data, and how much data to fetch has nothing to do with presenting the data. so whether you fetch 20 records or 20K records the page should behave the same. However you shouldn't be fetching 20K records at once. the user doesn't want to deal with 20K records and chances are the bandwidth and memory can't handle that either.

what you describe isn't impossible, but it does take a good amount of planning and an understanding of http/ajax/javascript to make it work.

Jason Meckley
Senior Programmer

faq855-7190
faq732-7259
My Blog

 

[housedouble]

Ow no I wouldn't fetch all the results in that sense, that would be crazy, I mean when the page loads it should then send AJAX requests for all the user/page variables instead coming down from the server with the initial page request.
It's a search facility so it's used a lot by everyone and I employed the use of AJAX to cut down network traffic because reloading the page every time was repeatedly downloading lots of things that didn't necessarily need to be updated, as they didn't change very often.

I think when I change the way the page works then history.pushState() will be exactly what the user wants anyway.

Better get programming because it's getting really annoying to use as it is, mainly because we have all moved to use Chrome instead of IE which used to work fine as it just re-requests the page, firefox was o.k. because it does remember what the page looked like before navigating away (although the data may be old, that's why I added a refresh search button), I think for now I will use the onpopstate to reload the page if it has been navigated back to which will have a more desired user effect in the interim.

 

[jmeckley]

that makes more sense

Jason Meckley
Senior Programmer

faq855-7190
faq732-7259
My Blog