jQuery Anchor Based Navigation

Question

I am looking for a way to navigate between pages and respond to events when the anchor changes with jQuery. In order to illustrate my question, let me demonstrate with an example:

A user enters a page which has loaded jQuery, without the jQuery UI or any additional plugins.
As the page loads, the user is redirected from http://thesite.com/ to http://thesite.com/#/, without any page refresh.
A link, like this, is clicked: <a href="#/author/bio">My Bio</a>.
jQuery uses the $.ajax() method to load the requested page, without a page refresh.
The user clicks the browser back button, and goes to http://thesite.com/#/, without a page refresh.

I am good when it comes to loading the page content. However, here is what I don't know:

How do I redirect to http://thesite.com/#/, if it is not supplied when the page loads?
How do I listen for a request to load a page without a refresh, when a link with an anchor divider (#) is clicked?
Most importantly, how do I listen for browser back/forward requests, the know what page to load?

Sorry for the crash list of questions. If my scenario wasn't clear enough, then here is a great site that already does it: http://grooveshark.com/.

Thank you for your time! I will reward generously for thorough answers/comments.

score 3 · Accepted Answer · answered Jun 17 '11 at 14:13

3

Well you would have to add an onclick to the a tags.

Then all you have to do is:

$('a').click(function(){

    window.location.hash = this.href;
    //some load of that url to the page
    return false;

});

And to listen in on hash changes you need a plugin like this one

answered Jun 17 '11 at 14:13

Naftali

144,921
39
244
303

Hmm... how is cross-browser compatibility with this method? – Oliver Spryn Jun 17 '11 at 14:22
@spryno724, which part of it? – Naftali Jun 17 '11 at 14:22
The `window.location.hash` you mentioned above. – Oliver Spryn Jun 17 '11 at 14:26
1

@spryno, that should be cross-browser, see this question: http://stackoverflow.com/questions/1263509/potential-problems-setting-window-location-hash – Naftali Jun 17 '11 at 14:27

score -1 · Answer 2 · answered Jun 17 '11 at 14:18

-1

First load jquery.

on ready change all urls something like

$('a').forEach(function(obj){
   obj.href=obj.href+"#";
});
// on click load 
$('a').click(function(a){
   ajaxLoad(a);

//push to window.history

});

answered Jun 17 '11 at 14:18

Dileep

775
5
20

all of the a tags already have a `#`, also there is no such thing in jQuery as `forEach` – Naftali Jun 17 '11 at 14:18
my bad I switch between jQuery and dojo :) – Dileep Jun 17 '11 at 14:23

jQuery Anchor Based Navigation

2 Answers2