Ajax back button with dynamic content

Question

I've created a page using JQuery and Ajax that helps a user filter through a series of options and ultimately displays a filtered list of products meeting their specification.

This all works fine.

The problem i'm having is the "Back Button" problem with Ajax, i know how to get around this with anchors on static content (i.e. Filter.php#Step2).

However, the page works by returning a list of product specifications, when a spec link is clicked, Ajax loads the same page again applying the links parameters, this is repeated up to six times, after which, the user is redirected to the filtered product URL.

If the user then clicks "Back", then of course, the filter page reloads from step 1 rather than the last step (step 6).

Does anyone know if this is even possible?

Answer 1

I can't say I've implemented this before personally, but I remember the jQuery Tools tab component doing something similar. I'm not sure if it will work for your particular situation, but it may be worth looking at their approach as a starting point.

jQuery Tools AJAX:ed tabs with History support

Answer 2

Every time you want to be able to go back to the previous step, change window.location.hash.

Ie.

window.location.hash = 'step1';

This changes the #foo part in the URL. You will also need a timer in JavaScript which checks if the hash was changed, as there is no way to reliably detect hitting the back button. Something along the lines of...

var oldHash = window.location.hash;
setInterval(function(){
  if(window.location.hash != oldHash) {
    //the hash was changed, do something
  }
}, 50);

I hope this helps