jQuery address plugin help

Question

I'm having a little difficulty working out how to use the jQuery address plugin - http://www.asual.com/jquery/address/- with my limited jQuery/javascript knowledge and would seriously dig some help!

So far my code looks like this:

jQuery(function($) {
 $.ajaxSetup({ cache: false });
 var hijax = $('ul.hijax a');
 var loader = $('<div id="spinner"></div>');
 var container = $('#ajax-container');
 hijax.address(function() {
 dis = $(this);
 hijax.removeClass('ajax-on');
 dis.addClass('ajax-on');
 var url = dis.attr('href') + ' #biog-container';
 container.html(loader).load(url);
 return dis.attr('id');
 });
});

Which I'm hoping is fairly self-explanitory. I have an ul of links to pages where I load via AJAX the contents of a div with an id of biog-container. The AJAX works ok and the url is updated with the ids of the links, but when I click on the back button, the url changes, but the content remains the same.

Any thoughts, am I being stupid?!

• Richard Sweeney: I should add that my links are regular links that I'm hijaxing - so a link will point to a real webpage eg: mywebsite.com/this/page/right/here/

Answer 1

To be honest, the address method doesn't do too much in the way of work for you. Actually, the plugin doesn't add support automatically.

However, it's pretty simple to do. You just have to setup the handler for the change method:

$.address.change(function(e){
 // The function receives a single eventobject parameter that contains the 
 // following properties: 
 // value, path, pathNames, parameterNames, 
 // parameters, queryString
 /* Do something based on e */
});

When the address is changed, your function gets fired. There are also other events internalChange and externalChange that you can set up to fire when the address change occurs internally or externally.

---

Edit: Just to expand on the above:

This is a full blown example of it working. In other words, you don't need to call anything else in the plugin for it to work:

// Override the click events of links
$("a").click(function(e) {
 e.preventDefault();
 $.address.path(this.id);
});
// Method called with the address changes
$.address.change(function(e) {
 // This is called when the 
 $("#content").html("Something based on " + e.value);
});

• jsFiddle: http://jsfiddle.net/jonathon/2sFYu/
• Full browser example: http://jsfiddle.net/jonathon/2sFYu/show (to see the back/forward)
• Straight to a deep link: http://jsfiddle.net/jonathon/2sFYu/show/#/link4

When the links are clicked, it sets the address path (in terms of the plugin) to the ID of the link. This generates an action so that the back/forward works correctly. It doesn't change the link itself so if JavaScript isn't enabled it will go to whatever the link address was.

The $.address.change bit sets the handler. This is where you would load the content. In my example, it uses e.value to get the value of the address path. So that would be something like /link1, /link2, etc. This handler gets called when the link is changed internally (by the plugin) or externally (by the browser back/forward).

Note: I noticed that this doesn't work flawlessly with jQuery 1.5.1. I'm pretty sure it has something to do with the change to jQuery 1.5 attribute selectors (which the address plugin seems to use). jQuery 1.4 works fine though.

• Richard Sweeney: Hi @Jonathan, thanks for your reply. I'm afraid you've set the bar a little too high for me! I'm just a lowly designer really and despite my best efforts, I just can't make my brain understand what to do with this information. Any more tips?! Cheers :)
• Jonathon Bolster: Hi Andy - I've made an update for you. Hope it explains things further :)
• Richard Sweeney: Mate, that is very awesome! What I can't figure out is how to pass the url of the clicked link to the address.change function... jsfiddle.net/richardsweeney/c5pkG
• Jonathon Bolster: @Richard The value that is passed to the address.change function comes from the hash on the location object. In my example above, I set this value to the ID of the link by calling $.address.path(this.id). If you wanted to set this value to the URL of the clicked link, change it to $.address.path(this.href);