Are there any pjax addons/frameworks for ExpressionEngine? What's the best approach?

Hey,

I’ve thought a lot about how you would do this, but haven’t had a project where I can explore the possibilities. A couple not-really-ideal solutions are:

1) If you are not concerned about the overhead of loading the stuff that you don’t need, you can always have jQuery pull in the whole page but then only load the content:

$("#stage").load('http://example.com/page.html #your-content');
window.history.pushState(data, "Title", "page.html");

2) Another option is to put your content inside embedded templates and write some javascript to intercept the links, like this:

“some.group/template.html” would be the full template, “ajax.group/some-template.html” would be the embed/fragment. The latter would be embedded inside the former. “ajax.group/some-template.html” would start with {if segment_1 == "ajax"}{redirect="404"}{/if} to protect your SEO. Then you would write some javascript to intercept your internal links and replace your first segment (inside the href attribute) with “ajax/first segment-” This would return the cromeless version, aka the embedded template. The only thing left after that is to get crafty about doing the same when your URLs have three segments instead of two. This approach wouldn’t work with the Pages module/Structure of course.

Obviously it would be much better to do things with server headers the way the pjax guys have it, but I have no idea how you would do that. Hopefully someone else around here does.

St

Hey, I’ve thought a lot about how you would do this, but haven’t had a project where I can explore the possibilities. A couple not-really-ideal solutions are: 1) If you are not concerned about the overhead of loading the stuff that you don’t need, you can always have jQuery pull in the whole page but then only load the content:

$("#stage").load('http://example.com/page.html #your-content');
window.history.pushState(data, "Title", "page.html");

2) Another option is to put your content inside embedded templates and write some javascript to intercept the links, like this: “some.group/template.html” would be the full template, “ajax.group/some-template.html” would be the embed/fragment. The latter would be embedded inside the former. “ajax.group/some-template.html” would start with {if segment_1 == "ajax"}{redirect="404"}{/if} to protect your SEO. Then you would write some javascript to intercept your internal links and replace your first segment (inside the href attribute) with “ajax/*first segment*-” This would return the cromeless version, aka the embedded template. The only thing left after that is to get crafty about doing the same when your URLs have three segments instead of two. This approach wouldn’t work with the Pages module/Structure of course. Obviously it would be much better to do things with server headers the way the pjax guys have it, but I have no idea how you would do that. Hopefully someone else around here does. St

I’ve been using djax on several static sites. It might not be ideal for everything, but it certainly does the trick. The sites it’s running on certainly seem “faster” than they did before, and there’s never the annoying page flicker with navigating pages.

There’s no reason why it couldn’t be integrated with an EE site.