21

I have a PHP page with jQuery's $(document).ready() which does some changes to the form on the page. This works fine. But if I come to this page and then went to another and then hit 'Back' from the browser and came back to this page, the $(document).ready() function does not seem to run at all. This is happening on FF as well as Chrome.

Is there some way I can have document.ready executed even if the user hit the browser's back button to come to my page?

kmatyaszek
  • 19,016
  • 9
  • 60
  • 65
walmik
  • 1,440
  • 2
  • 13
  • 30
  • It might be you forms have autocomplete on – Musa Aug 08 '12 at 18:58
  • 5
    Two years ago, couple of seconds searching: http://stackoverflow.com/questions/2638292/after-travelling-back-in-firefox-history-javascript-wont-run – Alfabravo Aug 08 '12 at 18:59
  • @Musa, this happens even if there s no form used at all. Basically the document.ready function wont fire if the page was visited by hitting the back button of the browser :( – walmik Aug 08 '12 at 18:59
  • @Alfabravo Thank you! That works :) Can you please post that as an answer as well? I ll close it then – walmik Aug 08 '12 at 19:01

2 Answers2

25

I had exactly the same problem; @Alfabravo's link helped me a lot here: https://stackoverflow.com/a/12648785/679240

The code below worked okay enough for me, since what I actually needed was to do some cleanup either when the user entered the page or when the page was reached through the back button:

$(window).on('pageshow', function(){
    console.info('Entered the page!');
});

If you need to specifically detect specifically when the page was reached through the back button but not when entering it the first time, you may need to control a bit of state; the link above may help you there.

Haroldo_OK
  • 6,612
  • 3
  • 43
  • 80
  • 1
    This is a great way to prevent an action from beeing done while clicking the back button. I used this to block the "loading page..." div based on $(document).ready if the users is coming from the back button (because the page is already loaded as it is in the cache). – Ben Dec 13 '22 at 14:34
4

My use case is that, when hitting the back button the ready event is fired and my handling function executed just fine.

In spite of this I found that some of my page data was still stale.

I put in some console.log()s to assert that all functions were in fact being called.

For my particular situation, when the page is loaded some AJAX is called to load some data from my server. I found that it was, in fact, the response from the API that was being cached!!!

Of course it was!

My solution, then, was simple.

I added a newly generated timestamp

new Date().getTime();

as a query parameter to the AJAX call's URL and voila, the data returned was fresh.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
John Carrell
  • 1,662
  • 3
  • 21
  • 31
  • 3
    FYI this technique is well known and it's called cache busting – sscarduzio Sep 18 '18 at 08:41
  • This post that reminded me the contents of the AJAX response could be cached as well, so thank you from the future. – msulis Sep 23 '19 at 22:16
  • To the recent editor of this answer: Thank you for trying to improve it but I found that your edits mostly just removed my attempts at humor. This being a socialized platform I see no reason to avoid personality in answers so long as the core content is practical. If you were a Futurama fan, maybe you would have been more amused. I respectfully ask you to refrain from further edits. – John Carrell Feb 17 '21 at 15:45