Ajax Navigation : Get Working Back Button w/ pushState

I am stuck on a bit of an issue. I have employed AJAX navigation (with url fallback for bots) on my site and, while the navigation works great on click of navigation options on the site itself, the browser’s back/forward buttons I’m struggling to get working. Here is the script:

function newfeat2(page) {
    var formData = "page=" + page;
    $.ajax({
        url : "/ajax/nav_page.php",
        type: "POST",
        data : formData,
        success: function(data, textStatus, jqXHR) {
            $('#top_features').fadeOut('fast', function() { 
                $(this).empty(); $(this).append(data).fadeIn('slow');
            });
        },
        error: function (jqXHR, textStatus, errorThrown) {}
    });
    scrollToAnchor('featbar',46);
    adtracker();
    //browser history
    var doctitle = 'Featured Archive - Trailer Addict';
    document.title = 'Featured Archive - Trailer Addict';
    var urlPath = '/featured/'+ page;
    //window.history.pushState({"html":response.html,"pageTitle":doctitle},"", urlPath);
    window.history.pushState('feature-id:'+ page, doctitle, urlPath);
}

I believe I need to bring the onpopstate into play and I think my objectState in pushState is fouled up.

Seeking advice/solution to get the backbone/forward button working in browser.

All feedback appreciated.

Cheers!
Ryan

Hi Ryan,

What is actually happening when you click the back button, and what is it that you want to happen?

Also, I noticed an error with this line:

window.history.pushState('feature-id:'+ page, doctitle, urlPath);

The first argument should be an object, not a string.

Hey Fretburner,

I figured that wasn’t right. When I tried creating an object with variables I kept getting javascript errors. Are variables allowed in the objectState?

When it comes to the back button, it would be cool for it to navigate in AJAX and do all the effects and such, but at this point I’d accept if the back button would just go directly to the URL I supplied in urlPath.

Cheers!
Ryan

According to the docs over at MDN, the object can contain anything that can be serialized.

In that case what you said in your 1st post is right, you want to be hooking into the popstate event. Try something like this:

var topFeaturesEl = $('#top_features');

function changePage(page, title, addToHistory) {
    var addToHistory = (typeof addToHistory !== 'undefined') ? addToHistory : true,
        urlPath = '/featured/'+ page;
    
    loadPage(page).success(function(data) {
        topFeaturesEl.fadeOut('fast', function() {
            $(this).empty();
            $(this).append(data).fadeIn('slow');

            document.title = title;
            if (addToHistory) {
                window.history.pushState({page:page, title: title}, title, urlPath);
            }

            scrollToAnchor('featbar',46);
            adtracker();
        });
    });
}

function loadPage(page) {
    return $.ajax({
        url : "/ajax/nav_page.php",
        type: "POST",
        data : { page: page },
    });
}

function handlePopState(event) {
    if (event.state.page) {
        changePage(event.state.page, event.state.title, false);
    }
};

window.onpopstate = handlePopState;

To change the current page, just call:

changePage(yourPageName, yourPageTitle);