Css styles set by jquery lost after back button
A simple script displays a color palette. I am using jQuery.ready
to initialize it. When I click on a color, the script just changes the class of the clicked so that a checkbox appears on it. It also puts the color value in a hidden box.
Now I click on the navigation bar to go to another page, then click the Back button. The value in the hidden field is still here. But the colored box is no longer checked (firebug confirmed that the class is no longer here).
What can I do to ensure that the dynamically set class with jquery is still there when you return to the page?
(I tried this in recent FF and IE)
source to share
You cannot rely on your browser to maintain the state of your website. When you use the Back button and the value of the hidden field is still considered optional there, you may not get the same behavior with other browsers.
This means that you have to save and maintain the website yourself. If you've used ajax to navigate your site, you could easily maintain state with an object, but since that's not the case, the solution might be to use cookies.
EDIT : HTML5 Web Storage could also be an alternative solution, the same logic applies.
The following W3Schools code taken from http://www.w3schools.com/js/js_cookies.asp
To set a cookie
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
To get the cookie value
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
This way, you usually set a cookie when the user selects a color (using setCookie()
), and every time the page is loaded, you check the cookie value (using getCookie()
) and populate the page accordingly.
Example
//User has chosen a color, save that in a cookie for 1 day
setCookie("selectedColor", "green", 1);
//Page is loaded, check for cookie value...
$(document).ready(function()
{
//Get cookie value
var selectedColor = getCookie("selectedColor");
if(selectedColor != "")
{
//A color has been previously selected, add the CSS class accordingly
$("#"+selectedColor).addClass("selected");
}
});
EDIT: To save the state only when leaving another site (not just pressing the back button). A reboot clears everything.
Suppose the user sets the color to page1.html
, then goes to page2.html
, and then back to page1.html
.
C page1.html
save the selected color value in a cookie as before.
//User has chosen a color, save that in a cookie for 1 day
setCookie("selectedColor", "green", 1);
But now when loading page1.html
, only fill the page with a possible previously selected value if a certain cookie (explained below) is set to true
.
//page1 is loaded
$(document).ready(function()
{
//Only populate page if "populate" cookie is set to true
if( getCookie("populate") != "true" )
{ return; //Stop }
//Get cookie value
var selectedColor = getCookie("selectedColor");
if(selectedColor != "")
{
//A color has been previously selected, add the CSS class accordingly
$("#"+selectedColor).addClass("selected");
//Set "populate" cookie to false
setCookie("populate", "false", 1);
}
});
Now, page2.html
do the following:
//page2 is loaded
$(document).ready(function()
{
//Set "populate" cookie to true
setCookie("populate", "true", 1);
}
This lets you know if a visitor is arriving from another page when they reach page1.html
. Be aware that if the user does this ...
page1.html -> page2.html -> google.com -> page1.html
.. the values will still be. A reboot page1.html
clears everything. Unfortunately, I cannot provide you with HTML5 Web Storage examples as I have never used it, but applying the same logic will give you similar results.
Hope it helps.
source to share