Hacker News Reader

Comment by MatthewPhillips | Hacker News Reader

Right now I'm doing pushState manually and I have a bug that I can't figure out. popstate happens whenever history changes, including when the user types my URL in and hits enter. There doesn't appear to be a way to differentiate between hitting the back button and going to my URL directly. Which is a problem because if they type it in directly I want to render on the server, if they hit the back button I want to do xhr. What am I doing wrong?

As for Backbone, I really need to switch to this rather than manually handling click events and feeding jquery tmpl. Backbone seems to be a much better way to do it but there also appears to be a learning curve that I'm fighting against going through.

View on HN

> Which is a problem because if they type it in directly I want to render on the server

Why? What difference does the precise way they navigated to the URL make?

> if they hit the back button I want to do xhr.

Most back buttons have a popup menu which let users go to a completely arbitrary url they've already seen, they're not limited to the very last page. They can also hit the button several times to go back to the same page.

> What am I doing wrong?

You're adding arbitrary separations between two instances of the same event: your users going from your site to your site.

They are not arbitrary separations, they are very real. When a user navigates from the URL bar or from a link on another site the browser requests a specific location from my server. Since I'm already serving the browse HTML it makes sense to render my templates at the same time. It doesn't make sense to send only a generic template and then have the popstate trigger an XHR request for some JSON which gets rendered by a javascript template library. That's extra and unnecessary.

What are you suggesting? That I request the entire html doc at every popstate event?

> When a user navigates from the URL bar or from a link on another site the browser requests a specific location from my server. Since I'm already serving the browse HTML it makes sense to render my templates at the same time. It doesn't make sense to send only a generic template and then have the popstate trigger an XHR request for some JSON which gets rendered by a javascript template library. That's extra and unnecessary.

Wait, I might have misunderstood something here: do you mean `popstate` is triggered when users arrive on your site from an other one or from nowhere? On initial loading? As in, it's triggered by navigation between different domains, not just in-domain navigation?

Correct.

Would you happen to be using Chrome?

edit: Try checking the `state` attribute of your event object, it should only be set (therefore truthy) for history entries created via pushState, urls being navigated will not have a state.

Yep. Chrome bug?

May be a chrome bug[0] or a spec bug/weirdness[1].

See edit, try checking for the state attribute on your event object to filter out spurious popstate events.

An other option would be to use a shim library (History.js) handling that kind of crap (and smoothing out implementation details issues) for you.

[0] http://www.google.com/support/forum/p/Chrome/thread?tid=28ed... [1] http://hacks.mozilla.org/2011/03/history-api-changes-in-fire...

Yep, I was doing it wrong. You're supposed to pass a state object as the first parameter, I was passing null. So this fixes 2 things, prevents me from having to do XHR on initial page load AND I don't need to do an XHR on back/forward navigation either, I can just use the state object to store my data. Awesome!

Good to hear.

I just tried this and state is always null for me.

edit: it was because I was passing null on pushstate. I can change this. Thanks!

> What am I doing wrong?

pushState is called with three arguments, {state, pagetitle, url}

If the user navigates directly to a URL, state will be null or undefined, in which case your onpopstate handler should not execute the XHR transition.

I'd recommend testing in both Firefox and Chrome, as each browser handles onpopstate events differently.

Reply on news.ycombinator.com