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

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