CODEWITHSUNDEEP
jquery
elkelk
elkelk

Reputation: 1752

Reload or maintain DOM state using Jquery after browser back button pressed

I need a browser page to maintain it's post ajax changed state after the user navigates away and hits the back button to return to it. Unfortunately items previously faded out with jQuery are visible or dynamically added items (via ajax) disappear once the user hits the back button to return to a page.

I've tried about 20 different no-cache meta and header solutions and none seem to work in Chrome 13.0.782 for mac. I've also tried the onunload solution outlined here: Is there a cross-browser onload event when clicking the back button? to no avail.

Ideally I'd like the page state to remain the same (with all jQuery changes to the DOM) without having to reload it, but I would be happy with the ability to reload the page when a user navigates back to it.

I realize there are multiple questions about reloading after the back button is pressed, but none of the solutions work in my situation.

Upvotes: 3

Views: 8311

Answers (3)

woens
woens

Reputation: 1078

If you just want to get a pagerefresh from the server on a back-button, use cache-control 'no-store, no-cache, must-revalidate'.

Chrome wants no-store, and IE wants must-revalidate. For other browsers (and w3c) no-cache is enough.

Upvotes: 0

aziz punjani
aziz punjani

Reputation: 25776

A common practice, such as the one used by google is to append a hash value to the url. So for example, after you fade some divs out you could do 

window.location.hash = "hide_div";

Then you would put a onHashChange listener 

$(window).bind('hashchange', function() {
    var hash_value = window.location.hash; 

   if ( hash_value === 'hide_div' ) 
        // hide certain divs
});

P.S This is a very rough pattern for maintaining ajax state.

EDIT: I would suggest also taking a look at the History API in HTML5.

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

You need Really Simple History:

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

EDIT: Alternately you can stash the innerHTML of the BODY and store it in window.name as a string, using the onbeforeunload event. Then set a cookie so when the page reloads and you detect the cookie and can the value of window.name back into the BODY.

Upvotes: 1

Related Questions