Changes made in Javascript revert to initial state on hitting 'back'

They have: 12 posts

Joined: Jun 2006

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

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's picture

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. Smiling

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!

They have: 12 posts

Joined: Jun 2006

Thanks, JeevesBond. Nothing's ever that simple, is it? Smiling

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

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.