Enabling back/fwd key events for an Ajax Application

Question

I have an application which works heavily on AJAX. However I want to have navigation functionalities in it. To spoof the url, I am changing the location.hash, to generate URL. But if i use back/fwd, only the url changes, but page wont reload. How can I override the hstory.back to reload the page.

Answer 1

You can't exactly capture the back event, but most of these problems have been solved - and a good thing too, it's a hard problem.

Take a look at really simple history (aka RSH) and either implement it or work through it to see how it works.

Answer 2

I don't know of any other way than continuous polling to implement this behaviour. An implementation might look like this:

var lastHash = '';

function pollHash() {
    if(lastHash !== location.hash) {
        lastHash = location.hash;
        // hash has changed, so do stuff:
        alert(lastHash);
    }
}

setInterval(pollHash, 100);

Answer 3

The answer for this question will be more or less the same as my answers for these questions:

• http://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url/3276206#3276206
• http://stackoverflow.com/questions/3460041/how-does-gmail-handle-back-forward-in-rich-javascript/3460269#3460269

In summary, two projects that you'll probably want to look at which explain the whole hashchange process and using it with ajax are:

• jQuery History (using hashes to manage your pages state and bind to changes to update your page).

• jQuery Ajaxy (ajax extension for jQuery History, to allow for complete ajax websites while being completely unobtrusive and gracefully degradable).