Changes made in Javascript revert to initial state on hitting 'back'
Hi all.
Your advice/tips please.
I have a site with a front page which does a couple of tricks using Javascript; principally I use something along the lines of
document.getElementById('firstthing').style.display='none';
document.getElementById('secondthing').style.display='block';
which hides 'firstthing' and displays the previously-hidden 'secondthing'.
I also do a bit of span content changing with '.....innerHTML=.....'
This all works very nicely with all browsers (modern ones at least, but that's not the point).
The problem is what happens when I click a link to go forward, then return to the original page using the back button. Everything appears exactly how I left it if I'm using Firefox or Safari, but when I use IE 8 (including 'compatibility view') or Chrome, the page has reverted to how it looked when first loaded (e.g. 'firstthing' is visible again rather than 'secondthing').
I can imagine doing some ugly fix by storing the page state in some variable or form field and then re-populating everything when the re-load is detected, but is there any simple way (kind-of a "no-cache" command) that tells the page not to re-start everything?
Many thanks!
Andy
aci20 posted this at 12:33 — 16th March 2010.
They have: 12 posts
Joined: Jun 2006
OK, I'm shy, but if it'll help, here's the offending page!
http://runcambridge.org.uk/
Main gripe is the 'news' 'fixtures' 'results' tabs - click one and follow a link on it before going back.
Ta!
JeevesBond posted this at 20:11 — 16th March 2010.
He has: 3,956 posts
Joined: Jun 2002
Thanks for posting a link, I wouldn't have had much of an idea of the problem you're describing without it.
Sadly, I don't believe there is an easy way to fix this. You're going to have to store the active tab in a cookie, then use an if statement to say: if there's an active tab stored in the cookie, show it and hide everything else, otherwise show the default tab and hide everything else.
Shouldn't be too difficult, post again if you get stuck. Good luck.
a Padded Cell our articles site!
aci20 posted this at 10:46 — 17th March 2010.
They have: 12 posts
Joined: Jun 2006
Thanks, JeevesBond. Nothing's ever that simple, is it?
I put in a hidden form field (input type=hidden id=tab name=tab) which I populated with the tab number each time a tab was clicked. My routine checks that field, and if it finds a number, it 'clicks' the tab. Happily IE doesn't clear the form contents (though I have a nagging doubt that it will for some users depending on settings..?). Seems to work with all four tested browsers anyway.
Still haven't fixed the random photo thing (innerHTML changes the content of the box) - probably could but can't be bothered as it's way more trivial!
Thanks again, JB, though I'd still be interested if anyone knows a trick.
Andy
webwiz posted this at 15:39 — 19th March 2010.
He has: 629 posts
Joined: May 2007
A more robust solution might be to save the form data locally. Cookies have already been suggested, but to retain a lot of data I suggest you look into the YUI 2 Storage Utility. It looks like it's tailor made for situations like this...
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.