«

»

How to Refresh Page when called via the Back Button

From time to time, we are asked the question on the hotline, “How do we disable the back button?” Though it seems like a simple request, it is an extremely challenging task. For instance, it is not terribly difficult to remove the back button from the window, but the user can still access the previous page through the browser’s right-click context menu, or by clicking ALT+Left Arrow.

Rather than trying to stop the user from interacting with the back button, I would rather try to address the problem of why the developer wants to stop the end-user from interacting with the back button.

In this tech blog post, we are going to handle a somewhat common request:
“I have a work-with Maintenance application. When my user edits a record and clicks “Accept” she is brought back to her list of records that shows, among other things, her updated record. However, If she presses the back button, she can see the old cached page that shows the old data (before it has been updated). Understandably, this causes some confusion on her end.”

Rather than stopping the user from clicking the back button, I would rather address the specific problem — How to force the page to reload when accessed via the back button. Since each browser handles caching in a slightly different way, the issue has to be solved in a manner that is applicable to any browser. In our case, we will solve this issue with JavaScript.

Work-with Maintenance applications have two pages — a “List” view and a “Maintain” view. For the scope of this example, we will concentrate on the “List” page.

Add the following code directly before the </head> tag within the source view of your “List” presentation layer:

<script type="text/javascript">
       jQuery(document).ready(function()
        {
                var d = new Date();
                d = d.getTime();
                if (jQuery('#reloadValue').val().length == 0)
                {
                        jQuery('#reloadValue').val(d);
                        jQuery('body').show();
                }
                else
                {
                        jQuery('#reloadValue').val('');
                        location.reload();
                }
        });
   </script>

Lastly, you will need to add one line of code directly after the <– End data Table –> text:

 <input id="reloadValue" type="hidden" name="reloadValue" value="" />

When a user visits your “List” page without using the back button, the jQuery code will notice that no value has been loaded to the hidden input, it will load the current time, and otherwise behave normally. If, however, a user happens to navigate back to this page via the back button, the jQuery will see that the “reloadValue” has already been populated¬† (from the first time the page was loaded) and automatically refresh the page, going out to the server to get the newest version. When the end-user visits this page via the back button, the screen will automatically refresh and she will not see her cached data, instead she will see the live data as the page was just refreshed.

Originally, the developer wanted to remove the back button to impede the user’s behavior. Since there will always be alternatives the user can use to “work-around” this method, we created a simple, effective option that does not encumber the user’s experience while still giving us all the necessary functionality. In our case, we were able to successfully refresh the page when it was accessed via the back button.

Please let us know if you have used this method or one similar to improve your user’s experience.

Related Posts:

7 comments

  1. developer says:

    Not work in Chrome!!!

    1. Robert says:

      It works fine for me in Chrome 25. Unfortunately, it doesn’t work in Safari 6.0.3. This snippet is the only thing that worked for me:

      window.onpageshow = function(event) {
      if (event.persisted) {
      window.location.reload();
      }
      };

  2. Nick says:

    This did the trick. Thanks!

  3. Mike McFatridge says:

    Rick,

    This is a GREAT idea and implementation! I have been struggling with this issue for a few hours now, and ran across this solution.

    I tried the window.onbeforeunload approach as well, but it simply doesn’t work in Chrome. Your implementation doesn’t rely on browser compatibility for a solution to work, and it works exactly as expected.

    Simply awesome! Thanks Rick!

    -Mike

  4. mike janick says:

    Worked great, stuck the code within a CMS too, Tested on Win7 with FF, Chrome, IE & Safari.

    Thank you, thank you, thank you!!!!

  5. Sena Kendali says:

    Thanks Man, Its work Great.

  6. yaffa says:

    not work on fierfox!
    someone know why?
    So excited, it’s such a good solution ..
    But what is it worth if it does not work in all browsers?

Leave a Reply