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:

1. A user enters a page which has loaded jQuery, without the jQuery UI or any additional plugins.
2. As the page loads, the user is redirected from http://thesite.com/ to http://thesite.com/#/, without any page refresh.
3. A link, like this, is clicked: <a href="#/author/bio">My Bio</a>.
4. jQuery uses the $.ajax() method to load the requested page, without a page refresh.
5. 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:

1. How do I redirect to http://thesite.com/#/, if it is not supplied when the page loads?
2. How do I listen for a request to load a page without a refresh, when a link with an anchor divider (#) is clicked?
3. 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.

Answer 1

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