JS page formatting is not retained when navigating away from a page and back

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?