PushState + ajax = pjax

https://github.com/defunkt/jquery-pjax

by bittersweet • 15 years ago

46 8 15 years ago

github.com

erik_p• 15 years ago

FF 3.6.x gets the "unsupported"message :(

Trying chrome now.

long• 15 years ago

For me, FF 4 works, as does Chrome.

jhrobert• 15 years ago

Note: as a progressive optimization, the very same solution can also be extended to full pages, ie not just "body" parts.

In that case, the main benefit over a "regular" load is that javascript files that you use don't get to be evaluated over and over, ie you load them once for all.

On my machine, this alone saves 300ms per page.

meric• 15 years ago

I've been trying to achieve this same effect (without this library of course...) I had links pointing to the 'full page' but used jquery to override the click event of the link so that they used ajax to download only a part of the page into a container. Which container, is determined by the javascript, which I carefully write to avoid confusing myself. Which body part to download was determined by the server. I did not have to duplicate my html; The body part was a template by it self, and included by a master template for the full page. When a body part was downloaded, some jquery javascript needed to be re-run. (e.g. $(x).accordion()) Depending on the url, either the full page or just the body part was served.

On incompatible browsers the javascript functionality did not activate and clicking on the links led to the full versions of the page.

Maybe this library can save me some headache.

drivebyacct2• 15 years ago

It shocks me that people still do Ajax without this technique (though not necessarily this library obviously).

GitHub is the only mainstream site I've seen handle Ajax "properly".

garindra• 15 years ago

You mean doing Ajax without changing the hash and all that the related crufts?

I guess that's because most browsers used by people out there today do not have support for direct url path changing without causing a reload. It's only been possible since the introduction of the HTML5 History API, which solved that very problem. Unfortunately, it's only supported by the newer browsers.

josefrichter• 15 years ago

how about implementing it with history.js so it works in html4 browsers using hashbang?

olivernn• 15 years ago

I have a similar library here http://bit.ly/fTj2Ls that uses pushState to provide a routing layer so you can handle perform ajax (or anything else you want to do) when a link is clicked. The best bit is that if JavaScript, or pushState, isn't available the links can still point to real pages on your server

PushState + ajax = pjax

Related Stories