Multiple AJAX requests on one page with HTML5 History API

Question

A typical page in my application contains various requests that allow a user to load some content quickly using AJAX. For example clicking the main navigation links in the headers loads whole sections of content, clicking tabs loads sub-sections and so on.

Because all of these 'areas' are in fact pages that are then chopped up using jquery to load in ONLY the required divs etc then they are accessible at urls (in case the user has JS turned off or opens the link in a new tab). And therefore I use https://github.com/browserstate/History.js/ to change the URL and title on the fly so the user can bookmark their current page even though they have loaded it using AJAX.

The problem however is when the user wants to use the back and forth buttons on their browser as it means that the code needs to know the previous page url and also know which ajax call to run eg the main nav or one of the tabs. The plugin can successfully change the url and title back to the previous page so it's stored in memory of sorts, but it's a case of running the correct Ajax call. Any ideas on how to deal with such circumstances?

To explain this further:

$('.globalTabs li a').live('click', function (e) {

e.preventDefault();

$.ajax({
                url: $(this).attr('href'),
                success: function (responseHtml) {
                    $('.mainContent').html(responseHtml);
                    History.replaceState(null, $(responseHtml).filter('title').text(), url);
                }
            });

});


$('.localTabs li a').live('click', function (e) {

e.preventDefault();

$.ajax({
                url: $(this).attr('href'),
                success: function (responseHtml) {
                    $('.localContent').html(responseHtml);
                    History.replaceState(null, $(responseHtml).filter('title').text(), url);
                }
            });

});

These two ajax requests both change the url and load content into different areas on the page. But when the user clicks the back and forth buttons I would need it to change the content back to what it was previously.

So for example if I went to /About/Team which would be local and came from /About when I click the back button it would take me back to that page and ONLY load the local content.

So how would I do this? The plugin clearly supports knowing the previous URL and title but it's just a case of loading the ajax call again and the correct ajax call at that!

Thanks

Answer 1

Use History.pushState(), instead of History.replaceState() and listen event window.onpopstate

window.onpopstate = function(event) { 
    alert("location: " + document.location);
    console.log(event, event.state);
    // event.state - the state object, what you can save with
    // History.pushState(myState, $(responseHtml).filter('title').text(), url);
}

more info at:

• mozilla developers network
• HTML5 spec