jQuery plugin for navigating a site using ajax calls instead of page loads?

Question

I am looking for a documented, cross-browser supported jQuery plugin that I can use to build a site like this: http://redsquareagency.com/

As you can see, as you navigate through the site, the URL changes via a hash and all new pages are loaded via ajax calls instead of page loads. This allows for some neat animations to be used when a new page is loaded.

I've searched for a while trying to find a good plugin that provides this functionality. The best I can find is jQuery Ajaxy: http://balupton.com/sandbox/jquery-ajaxy/demo/

But, the documentation is lacking, and I found it incompatible with the latest jQuery version (1.6.0).

Anyone know of plugins that can accomplish this?

I'm not sure if it's available as a jQuery plugin (so I'm adding a comment instead of an answer) but you could look at SWFaddress - I used that on my own site which runs jQuery in parallel. — chrisfrancis27, May 16 '11 at 15:41
This needs to be done at application architecture level. You need a router which sends internal page content in response to ajax requests. — Majid Fouladpour, May 16 '11 at 15:56
Looks like this was asked in a different form: http://stackoverflow.com/questions/1415291/jquery-history-plugin Best ways to accomplish this: http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html http://tkyk.github.com/jquery-history-plugin/ http://www.asual.com/swfaddress/ Personally, I'm going to go with jQuery BBQ for its documentation. Thanks. — bperdue, May 16 '11 at 17:56

score 0 · Answer 1 · answered May 16 '11 at 15:40

0

What you looking for is swfaddress. It provides deep linking for flash and ajax sites (obviously your looking for the ajax feature). You basically just have to listen for a page change request and load content accordingly.

answered May 16 '11 at 15:40

locrizak

12,192
12
60
80

1

Does swfaddress have added weight to support communication with SWFs that I don't need? – bperdue May 16 '11 at 16:19

score 0 · Accepted Answer · edited May 09 '14 at 04:14

Hmmm I don't think there is ONE plugin that does everything. But you can pretty much do some jquery your self with combination of jquery history plugin.

What you do do is write some code make all your hrefs load via AJAX. Like this -

$(document).ready(function() {
            $.history.init(loadContent);
            $('#navigation a').not('.external-link').click(function(e) {
                    var url = $(this).attr('href');
                    url = url.replace(/^.*#/, '');
                    $.history.load(url);
                    return false;
                });
        });

And that's it. The jquery history plugin will take care of the rest. You should also read google's documentation on how to do this properly for them to index it.

jQuery plugin for navigating a site using ajax calls instead of page loads?

2 Answers2