Cache Javascript/jquery events

Question

Not too sure what to call this, but here is my abstracted problem:

When going back and forward, why will some browsers not remember what was open and others will?

For example,

Given the following:

html

<h2>&raquo; <a href="#" id="clickMe">Click Me</a></h2>
<div id="hiddenContent">
    <h2> Meaty Filler </h2>
    <p>
       Bacon ipsum dolor sit amet deserunt venison dolor meatball laboris short loin dolore capicola prosciutto. Tongue cillum salami, drumstick strip steak do spare ribs ball tip proident short loin ullamco ex tempor. Fugiat labore in ut quis ribeye turducken pig beef. Corned beef ham proident, nisi adipisicing bresaola irure kielbasa pig. T-bone nisi ham hock consequat laborum est exercitation dolor shoulder biltong velit qui sunt. Ut chuck esse short ribs turducken, pork loin id.
    </p>
    <p>
Nulla sunt aute meatloaf drumstick pork. Drumstick deserunt capicola aliqua flank leberkas brisket consectetur. Pork belly meatloaf proident, deserunt tri-tip voluptate aliqua. Commodo minim consequat, shoulder tenderloin eiusmod laborum excepteur flank reprehenderit in.
    </p>
   &raquo; <a href="http://baconipsum.com/">  Get Me Some Bacon</a>
</div>

javascript/jquery

$('#clickMe').click(function(e) { 
   e.preventDefault();
   $('#hiddenContent').fadeToggle();        
})

css

#hiddenContent {display: none; border: 1px solid #ccc; background: #fcfcfc; padding: 1em; margin: 2em; border-radius: .25em; box-shadow: 2px 5px 10px #DBDBDB;} 

#hiddenContent:hover { background: #FBFBFB; } 
h2 { font: 1.5em/1.75em Georgia, serif; } 
p { margin: 0 0 1em; font: 1em/1.25em Georgia, serif; text-align: justify; } 
a { color: #444; text-decoration: none;} 
a:hover { text-decoration: underline; color: #222; }

When I click on "Get Me Some Bacon" and hit the back button, chromium and IE8 will not remember that #hiddenContent was open, and no longer hidden, but firefox will. Ideally, I would prefer to mimic the behavior of firefox, but am not sure if I am able to. Is this possible?

here is a NON WORKING jsfiddle. It will not work as jsfiddle explicitly reloads the page when you hit back, but in my (struts -- java based) web application I have set the response to explicitly cache.

alexp · Accepted Answer · 2012-12-06 00:45:13Z

1

So it sounds like you want the browser to remember what changed on the page after the page loaded when you go back to it. Firefox's page cache does work like this in some instances, but you can't count on it in other browsers.

I think what you want to do is update the URL hash (or fragment) when you un-hide the content. That will put a new entry in the browser's history.

Then on that same page, you want to check the hash on page load to determine whether to show the hidden content.

$('#clickMe').click(function(e) { 
    e.preventDefault();
    window.location.hash = 'show'
    $('#hiddenContent').fadeToggle();        
})

and also add this

$(document).ready(function() {
    if(window.location.hash == 'show')
        $('#hiddenContent').show();
});

Then when you hit back, #show will be in the URL. On ready, you can check that value and show the content.

answered Dec 6, 2012 at 0:45

alexp

3,6474 gold badges31 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

matchew Over a year ago

I like this idea. As it is a long the lines of something I was thinking. If I could have the javascript respond to something in the pagee. I have left work for the day, but I might have to try it out in the morning.

matchew Over a year ago

This was actually, exactly what I was after. Do note that my original question is almost a dupe of stackoverflow.com/questions/680785/… which gives a lot of valuable information as well.

Community · Accepted Answer · 2017-05-23 12:29:20Z

0

It looks like this may not be possible (or at least in a way that is always guaranteed to work), as it is browser dependent behavior. There may be settings in Chromium and IE that can be used to mimic the Firefox behavior, but those settings are the domain of the browser user, and therefore largely out of your control.

Also take a look at this related question: Does back/forward in the browser change javascript variables?

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Dec 5, 2012 at 23:29

Chamila Chulatunga

4,95418 silver badges17 bronze badges

2 Comments

matchew Over a year ago

Yes, this is largely where my thoughts have taken me. Asking stackoverflow is sort of my last resort on this one.

Chamila Chulatunga Over a year ago

Yeah, it's not fun, is it - browser standardisation would make life so much easier. :)

Collectives™ on Stack Overflow

Cache Javascript/jquery events

html

javascript/jquery

css

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

html

javascript/jquery

css

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related