Develop Reference

Javascript: Making divs hold state of display='block' when user clicks BACK button in browser

I have a few divs on a form that are hidden by default (style="display:none;"). When the user clicks a certain radio button, an onclick event executes and exposes the divs. The user is then taken to a review page upon form submit that shows him any errors. If there are any, he clicks the BACK button on his browser to go back to the form and correct them. Caching is enabled so that all of his form contents are there. The problem is, since the form is looking for an onclick event, all of the previously exposed divs are hidden again. Is there any way to make sure they stay exposed when the user clicks back to the form from the review page? I thought a document.ready function would do it, but no joy.

As Yair mentioned, you can use cookies. It cannot be done with pure JS. However, you can also use PHP.
Before the user is transferred to the second page, have JS scan the divs in question, and find which ones are visible. (I'm assuming they all have individual IDs). Store these IDs in a comma-delimited string, or array, and send it as a _POST or _GET to the new page.
Have PHP store it as a hidden value somewhere. You could use a hidden input, or a data-x on something ... as long as it's there.
Have JS on that page that watches for the back click, stops it, and then redirects the user to the previous page, and sends the string or array back to it. Have PHP on that page print it as a JS value, and have JS on pageload show all divs with matching IDs.

Cookies or localStorage if you aim for only modern browsers:
localStorage

Is there any way to make sure they stay exposed when the user clicks
back to the form from the review page? I thought a document.ready
function would do it, but no joy.
You can use cookies in order to manage state in a web-browser. Cookies will help you save the desired user's state.

All javascript code is reinitialized on browser reload. You cannot identify whether the user comes back through the browser.
You can use cookies or local storage to save a value when initial display happens and show/hide the div later on document.ready.

Save the state of page. Cookie or session?

I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)

Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.

Only do work on the first page load, not when the user comes via back/foward

I want to do some work when the user first lands on my page (via a link or directly entering the URL). However, if the user goes off somewhere else and comes back to my page via back/forward buttons, I don't want to do the work again.
What's the best way to achieve this?
Note: The work should be done if the user hits the refresh button, forcing a page reload.

if (performance.navigation.type !== performance.navigation.TYPE_BACK_FORWARD) {
//No back or forward button.
}
Combine this with localStorage I suppose.

One possible approach is outlined below, albeit, it's not at all elegant.
embed a random nonce key in the server generated page
JS checks if this random nonce exists in cookie?
If it doesn't exist, save it in a cookie and run the script
If it exists, the page was loaded from browser memory and hence not a fresh load.

Just an idea:
browsers usually remember input-values, so they will be present when you navigate back.
You may use a input(hidden with CSS).
Onload check if the current value of the input does have a special value(this value must be generated on server-side, so it will not refresh when you use back/forward)
<script type="text/javascript">
jQuery(
function($)
{
if($('#history').val()==$('#history').data('value'))
{
alert('you did use back/forward');
}
else
{
$('#history').val($('#history').data('value'));
alert('you did not use back/forward');
}
}
);
</script>
<input style="display:none" id="history" data-value="<?php echo time();?>"/>
When the user uses back/forward, the input-value is equal to the data-value attribute(but not when the user hits F5, because then the data-value-attribute will refresh too).

Best way is to use HTML5 web storage, Use session storage. When page loas first time check if local storage variable is set and stores some data, If not then set data, if user uses next/prev button and comes back again when pageload event will get called you can detect that user been here before and its not the first page load. See this demo
http://www.amitpatil.me/demos/html5-web-storage/web_storage.html and here is the detailed article http://www.amitpatil.me/introduction-to-html5-feature-web-storage/

LocalStorage would be nice here. Works similar to cookies but only exists on the client side, Nothing is sent with the headers. Others have said the same or similar, I hope this example shows you how easy it all is to do.
So you will set the value of the variable to the identifier for the current page and reference it against the variable A) existing, and B) being set to the first page.
<script>
if( !localStorage["lastPage"] && localStorage["lastPage"] != theFirstPageIdentifier ) {
// this is the first view
localStorage["lastPage"] = currentPageIdentifier;
}
</script>
Note: localStorage is not available by older version of IE (maybe others) and cookies could be used here for a fallback. Same concept.
I feel like you need an example to show you this will work: http://rlemon.github.com/demos/12323999/page1.html view source.

I think a solution to your problem would be storing a session cookie that will remain while the current browser is open , then will expire - this is easy using jQuery Cookie Plugin
Then you can set a cookie as easily as this
$.cookie("example", "foo");
The work you talk about would be performed if cookie is not present , and ignored is cookie is present

ON/OFF Navigation Panel (Inter-Page Cache)

I have written a small sample page below to show you what I mean.
Is there a was to keep the .panelNav Open when navigating to another page and Function just as an ON/OFF switch only when the user allows the change?
http://glustik.com/glustik2/page1.html

I would use the jQuery cookie plugin - https://github.com/carhartl/jquery-cookie - and set the cookie to menuOpen or menuClose & write/rewrite it when the user changes the state of the menu.

Yes, here are some suggestions:
use AJAX to load another page directly into the content
placeholder
store a cookie value, and opening the menu when you get to another page if it is set.

Alternatively, append a parameter (e.g. "?navopen=1") or a fragment identifier ("#navopen") to the linked URL and check for that in your $(document).ready function. This might be nicer than a cookie because it will follow the user's clicks around, but will not affect pages opened from other sources.

Handling GUI after clicking the Back Button

I use a small JS to mark entries as Read upon click, before the user goes to the entry page.
When the user clicks Back, the removeClass I used doesn't seem to keep its effect.
Is there a way to force this on Back behavior?

IE 8, Firefox and other browsers remember form entries on a back button press. You can use this to store some state in a page for when the user hits refresh or back.
Create a hidden textarea on the page somewhere and store your extra state in there. I use onbeforeunload to stash the state and then pull it out again with onload.
Unfortunately IE6 and 7 don't support remembering your form values on back or reload, so you would have to resort to something like cookies if you care about those browsers. Remember to keep the amount of data you store in the cookies small since it will be sent to the server on every request. You will also want to have some way of clearing out that cookie.
When I want to keep a large amount of disparate state, I use JSON.stringify from Douglas Crockford's json2.js.

When the user clicks Back, the browser reloads the page from scratch (except Firefox, which remembers form values), and the old page's Javascript and its effects are gone.
To work around this, you can persist the page's state in a cookie, then read the cookie when the page loads and restore the state, using a Javascript cookie library.

As suggested, you can use cookies. Or if you don't want to do that, you can store the info in hidden form field(s), and on page load (or domready) read the value and set the page state as necessary.

The only way to do this with JS is by storing a cookie with the items a user accesses and mark the entries in the cookie as "visited" when the page is loaded. The drawback is that there will be a small delay between the items loading into view and them being marked as visited (kinda like the one here on StackOverflow with a user's ignored and favorite tags).
Other than this, you could use some server side code to remember the visited entries in session.
If the entries are <a> elements, you can style them with:
a:visited {}