AJAX Back Button Fix

AJAX has become popular because you can execute server side scripts without having to refresh an entire page. By doing partial page refreshes, website performance is usually improved. However we start to run into a problem. If you have an entire website that fetches portions of pages or executes server side scripts using AJAX, clicking the back button will usually take a user off of their entire website, instead of 'back' to the last 'partial page refresh' which they would expect.

Flash developers have had to deal with this issue for a while, so my AJAX back button fix is a variant. Robert Penner's came up with his fix for Flash Back Button problem as it relates to flash.

Here is my solution:

You set your pages up so you have a hidden frame storing the page history for your ajax website so the back button knows where to take you back to.

What happens is this, when they click on a link to execute the ajax function, instead you replace it with a javascript function. This function redirects the hidden frame's page to a new page which corresponds to the ajax function you wish to call. When that page loads it executes the ajax function from the original page, when the ajax call returns you can format and display the results as you would normally.

When you click on another ajax link it does the same thing. When you go to click back... it moves to the previous page in the hidden page's history, which when loaded will execute the ajax function on the original page, returning the page to its previous state, just as you would expect a back button to.

The last thing to remember when you set it all up, is to make it so the initial page that the hidden frame starts on executes an ajax function which corresponds to the initial state of your original page, so when that if they only click on one ajax link, then click back, your page returns to its initial state as expected.

Working Demo
Download .zip