How to trigger change when using the back button with history.pushstate and popstate?

Question

I'm pretty much a novice when it comes to js so I'm sorry if I'm missing something really simple.

Basically, I've done some research into using the history.pustate and popstate and I've made it so a query string is added to the end of the url (?v=images) or (?v=profile)...(v meaning 'view') by using this:

var url = "?v=profile"
var stateObj = { path: url };
history.pushState(stateObj, "page 2", url);

I want to make it so I can load content into a div but without reloading the page which I have done using the .load() function.

I then used this code:

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;

in $(document).ready() section and later tried within just <script> tags and neither worked.

I don't know how to make it so the content changes when I use the back button or at least makes it so I can trigger my own function to do so; and I'm assuming it has something to do with the state object?! I just can't seem to find anything online that explains the process clearly.

If someone could help me out it would be amazing and thank you in advance to anyone who does!

Answer 1

The popstate only contains a state when there is one.

When it goes like this:

1. initial page loaded
2. new page loaded, with state added via pushState
3. back button pressed

then there is no state, because the initial page was loaded regularly, not with pushState. As a result, the onpopstate event is fired with a state of null. So when it is null, it means the original page should be loaded.

You could implement it such that history.pushState will be called consistently and you only need to provide a state change function like this: Click here for jsFiddle link

function change(state) {
    if(state === null) { // initial page
        $("div").text("Original");
    } else { // page added with pushState
        $("div").text(state.url);
    }
}

$(window).on("popstate", function(e) {
    change(e.originalEvent.state);
});

$("a").click(function(e) {
    e.preventDefault();
    history.pushState({ url: "/page2" }, "/page2", "page 2");
});

(function(original) { // overwrite history.pushState so that it also calls
                      // the change function when called
    history.pushState = function(state) {
        change(state);
        return original.apply(this, arguments);
    };
})(history.pushState);

Answer 2

Maybe it's not best solution, and maybe it doesn't suit your needs. But for me it was best to just reload the page. So the page is consistent an it loads everything according to current querystring.

$(document).ready(function() {
    $(window).on("popstate", function (e) {
        location.reload();
    });
});