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.”
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:
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.