3

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.

Community
  • 1
  • 1
elkelk
  • 1,692
  • 2
  • 13
  • 20

3 Answers3

1

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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • I don't need to track or undo ajax actions. This would be a bit of overkill. I simply need the page to look the same way that it looked when the user navigated away from the page when they hit the back button to return to it. – elkelk Aug 29 '11 at 19:25
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.

aziz punjani
  • 25,586
  • 9
  • 47
  • 56
  • 1
    I thought of storing a hash value to reload the page when a user navigates back to it, but I'd need to fire an event when they come back to the page to check for the hash. Any idea of how to bind to that? – elkelk Aug 29 '11 at 19:57
  • That's what --> $(window).bind('hashchange'... does, it listens for the hash change event, it is fired when you click back and the hash value changes, after this you can get the hash value. – aziz punjani Aug 29 '11 at 20:06
  • Oh, I think you misunderstand the question. I need to fire reload when the user has gone to any different page and then hits the browser back button to return to my page. After a bunch of jQuery events the page never looks right after hitting back to return to the page. – elkelk Aug 29 '11 at 20:24
  • This solution mostly worked for me. I ended up setting the hash to "#update" after changing any elements on the page. jQuery runs the ready function after the user returns to the page (by hitting the back button from another page). I added a function in ready to check if the hash = "#update" and I reload the page at that point. – elkelk Aug 30 '11 at 14:32
0

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.

woens
  • 1,058
  • 9
  • 20