Question

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.

Answer 1

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.