Solved

Back Button Causing Issues With Hidden Divs

Posted on 2016-08-25
5
71 Views
Last Modified: 2016-08-31
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
0
Comment
Question by:seeraig
  • 3
  • 2
5 Comments
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41771375
The reason they are not showing is that once you move off the page the state of the page is lost.

To preserve the state you would need to use a cookie or local storage to save a value that says whether or not the divs have been shown.
HTML
    <div class="hidden-div"> This is invisible on first read</div>
    <div class="hidden-div"> This is invisible on first read</div>
    <a href="#" class="show-divs">Show</a>

Open in new window

jQuery
<script>
$(function() {
  var state = getState();
  if (state) {
    $('body').addClass('has-state');
  }
  
  $('.show-divs').click(function(e) {
    e.preventDefault();
    $('body').addClass('has-state');
    setState();
  });
});
function getState()
{
  var state;
  if (typeof Storage !== 'undefined') { // Localstorage
    state = localStorage.getItem('__state');
  }
  else { // Cookies
    state = getCookie('__state');
  }
  return state;
}

function setState()
{
  if (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

Working sample here
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41771450
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
0
 

Author Comment

by:seeraig
ID: 41771481
Thank Julian. I'll try and test this out later today and let you know if I can get it working.
0
 

Author Comment

by:seeraig
ID: 41774148
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?
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41774342
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.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now