Question

I have a bit of an issue with page formatting when I navigate away, and then hit browser back to a page.

Here is an example:

I have security questions on a form in a drop down list like so:

https://i.stack.imgur.com/ib32z.jpg

When the user selects [Type in your own question] from the drop down list, I have some jquery that animates a CSS change that pushes the form down, and makes visible a hidden field for ‘custom security question’. When selected, the form looks like this:
https://i.stack.imgur.com/uVPKo.jpg

Now my dilemma is when I navigate away from this page, and then navigate back using the browsers back button, my formatting gets screwed up and looks like this:

https://i.stack.imgur.com/5Xhpi.jpg

The javascript that I have written does not trigger again on the back button so the browser doesn’t know to move the form back down to accomodate the change in spacing. Is there anyway I can force the document.ready to reload or clear some kind of cache?

Thanks!

EDIT: Sorry guys, I need to reupload the images to a host and repost. Sorry for the delay.

Answer 1

There are basically four mechanisms for persisting state on the web:

1. Browser-based – the browser, if you’re lucky, will save answers to form fields and re-display them when it sees an INPUT with the same name; also, some browsers will preserve some state between forward<=>back navigation
2. Cookie-based – pretty self-explanatory; you save a cookie with the state info, and check it later to recover the state
3. URL-based – navigate to a different hash of your URL, with the info you want in it (eg. “?roll_down=true”)
4. HTML5/Local Storage – Look it up if you’re interested 🙂

We can basically throw 1 and 4 out, because they both rely too much on browser behavior/support, and we can’t reliably rely on all browsers to handle them the way we want. That leaves #2 or #3.

Cookies allow you to save more info (as much as a cookie holds, ie. about 4k). URLs allow less info, but they have the added benefit of bookmark-ability; if the user saves the URL as a bookmark (or as a link they send a friend, or whatever), the state still gets preserved.

So, take your pick of the above, decide on how to persist your “my form is rolled down” state … and then comes the part that (I think) you’re really interested in: how do you check this state and fix things when the user clicks “back”?

That part I humbly defer to another SO post, which has already answered it:
Is there a way to catch the back button event in javascript?