Link to home
Start Free TrialLog in
Avatar of seeraig
seeraig

asked on

Back Button Causing Issues With Hidden Divs

On the page I have 2 hidden divs (display: none;) on page load. They are revealed with a jquery click function and then the user submits a form. If the browser back button is pressed, the divs are hidden again. I would like to have the divs shown on back button press, but I have no idea how to do this.
ScreenCast.flv
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Updated code to selectively choose cookie / localstorage in sample
CSS
<style type="text/css">
.hidden-div {
  display: none;
}
body.has-state .hidden-div {
  display: block;
}
body.has-state .show-divs {
  display: none;
}
</style>

Open in new window

HTML
    <div>
      <button class="btn btn-danger" id="reset">Reset</button>
      <input type="radio" value="localstorage" id="localstorage" name="storage" checked/> Local Storage <input type="radio" value="cookie" name="storage" id="cookie"/> Cookie
	  <a href="#" class="show-divs btn btn-primary">Show</a>
    </div>
    <div class="hidden-div"> This is invisible on first read</div>
    <div class="hidden-div"> This is invisible on first read</div>

Open in new window

jQuery
<script>
$(function() {
  if (typeof Storage === 'undefined') {
  $('#localstorage').prop({checked: false, disabled: true});
  $('#cookie').prop('checked', true);
  }
  var state = getState();
  if (state) {
    $('body').addClass('has-state');
  }
  
  $('.show-divs').click(function(e) {
    e.preventDefault();
    $('body').addClass('has-state');
    var type = $('input[name="storage"]:checked').val();

    setState(type);
  });
  
  $('#reset').click(function(){
  if (typeof Storage !== 'undefined') {
    localStorage.clear();
  }
  document.cookie = "__state=; expires=0";
  location.reload();
  });
});
function getState()
{
  var state = false;
  if (typeof Storage !== 'undefined') { // Localstorage
    state = localStorage.getItem('__state');
  }
  
  if (!state) {
    state = getCookie('__state');
  }
  
  return state;
}

function setState(type)
{
  if (type == 'localstorage' && typeof Storage !== 'undefined') { // Localstorage
    localStorage.setItem('__state', '1');
  }
  else { // Cookies
    document.cookie = "__state=1";
  }
}

function getCookie(cookie) {
  var ret = false;
  var cookies = document.cookie;
  var pattern = cookie +'=(.*?);';
  var regex = new RegExp(pattern);
  var val = cookies.match(regex);
console.log(val);  
  if (val) ret = val[1];
  
    return ret;
}
</script>

Open in new window

Updated sample here
Avatar of seeraig
seeraig

ASKER

Thank Julian. I'll try and test this out later today and let you know if I can get it working.
Avatar of seeraig

ASKER

Hi Julian,

This seems like I got this working, need to test a little more. What's the best way to delete the cookie, like after checkout?
Just set the cookie to a blank value with an expiry date in the past (-1, 0, 1970-01-01 etc)

You can read more on these links

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#notes
http://www.w3schools.com/js/js_cookies.asp

I would recommend reading both of those pages through to get a complete understanding of how cookies work.