0

I have a webpage with a box that appears on the first visit.

In other parts of the site, there are 'back' buttons, and also, of course, the browser back button.

However, the when using the back button (browser or html), the box is visible again.

Is there a way to ensure that the box will not be displayed again when going back? Even removing the object completely with .remove() doesn't work.

I've made an example jsbin here:

http://jsbin.com/losilu/2/

First, click the link to hide the box, then click the second link to go forward.

HTML:

  <div id="hide-on-back">
    Make this go away
  </div>
  <a href="#" id="hide-box">1. Click First To Hide</a><br/>
  <br/>
  <a href="http://jsbin.com/tipup/1/">2. Go Forward</a>

JS:

$(document).ready(function(){
  $('a#hide-box').click(function(e){
    e.preventDefault();
    $('#hide-on-back').fadeOut();
  });
});

HTML/JS (Back Button):

<a id="go-back" href="#" onclick="function(){history.go(-1);}">Go Back</a>
waffl
  • 5,179
  • 10
  • 73
  • 123

1 Answers1

1

As soon as you reload the page any modification you've done to the dom via javascript gets reset to its initial state. So, either you use ajax (e.g. with jquery.load I believe) to avoid getting the whole page reloaded or you provide a url parameter which you can check for via jquery (Get url parameter jquery Or How to Get Query String Values In js)

Last solution would be saving the information using cookies.

Community
  • 1
  • 1
max_
  • 324
  • 1
  • 7
  • Yes, unfortunately I've already setup a solution for cookies, but this doesn't work unless the page is fully reloaded (where PHP will check the cookie again – as the cookie isn't checked on the back event either) – waffl Sep 02 '14 at 01:44
  • Well just use jquery to read the cookies. I don't understand why you would need php for that purpose – max_ Sep 02 '14 at 01:51