CODEWITHSUNDEEP
javascriptjqueryajaxhtmlhtml5-history
sibidiba
sibidiba

Reputation: 6370

html5 history navigation: popstate not triggered except on page load

Given a webapp with ajax navigation, you intend to make use of html5's history navigation.

But: binding onto the popstate event it is not triggered. Excep on page load, when it is:

If HTML5 available (it is detected correctly, demos do work as well in Chrome as FF):

// Callback
function historyChangeHandler(data) {
    console.log(data);
}

// Bind
$(window).bind('popstate', historyChangeHandler);


// Trigger
$("a").click(function(e) {
    var url = "/";
    // ...
    console.log("clicked");
    history.pushState({url: url}, "", url);
    return false;
});

What does not work:

What I tried:

What does work:

Any clues I miss?

Upvotes: 0

Views: 2019

Answers (2)

Dagg Nabbit
Dagg Nabbit

Reputation: 76776

popstate isn't supposed to be called when you click the link. It's called when the user navigates with the back/forward button.

Everything is working the way it is supposed to.

Upvotes: 2

robertc
robertc

Reputation: 75777

Why do you need the popstate event to fire? Why not just call your function?

$("a").click(function(e) {
    var url = "/";
    // ...
    console.log("clicked");
    history.pushState({url: url}, "", url);
    historyChangeHandler({url: url});
    return false;
});

Upvotes: 1

Related Questions