jquery address how do you use it?

Question

I'm trying to understand how to use the jQuery address plugin for handling deep linking with ajax.

But the documentation is very poor and I cant find any good tutorials explaining what is going on.

I think a good documentation with good examples is important with every plugin.

Could someone explain or give some useful links for explanation?

$.address.change(function(event) {  
    // do something depending on the event.value property, e.g.  
    // $('#content').load(event.value + '.xml');  
});  
$('a').click(function() {  
    $.address.value($(this).attr('href'));  
});  

I mean, what does $.address.value do? It says "Provides the current deep linking value." What does it even mean? And what does it do with it?

Answer 1

The plugin seems to have moderate documentation, but if you're looking for something a little more in depth that does the same sort of thing, I would check out jQuery BBQ: http://benalman.com/projects/jquery-bbq-plugin/

It's $.param implementation is being put into jQuery 1.4 and its deparam implementation is currently the only thing that reads that new format. Also, the documentation is great.

Answer 2

A quick tut.: The biggest caveat of using AJAX is that the URL is not changing hence back button is not working + links are not crawled. The workaround for this is to use the page section anchor in the URL, the # sign. Based on the data after the hashsign you can use AJAX, load crawlable pageparts, etc.

The only problem with this that most browsers do not have an URL change event, based on which, the AJAX content can be loaded, so practicly what the plugin is doing is that from time to time it monitors the URL and if it changed, triggers an event based on tha after-hash-sign-parameters. So basically what you do here is

    $('a').click(function() {  
    **//change the after-hash-sign-params to the value of the clicked link**
        $.address.value($(this).attr('href'));

    });
    $.address.change(function(event) { 
 **//define an event handler based on the params...**
         if (event.value = 'sortbyname')
            sortstuffbyname()
else if (event.value ='sortbysomethingelse')
         sortstuffbysomethingelse();
        // do something depending on the event.value property, e.g.  
        // $('#content').load(event.value + '.xml');  
    });  

I never tried the other plugin but working principles are probably the same.

Answer 3

Found this online tutorial which I think was helpful for us to understand how to use jQuery Address. Code examples provided there too. Worth taking a look.

http://www.thetutorialblog.com/jquery/deep-linking-with-jquery/

Answer 4

I'm also finding out how to use Jquery address and chance upon this web site which uses it to compliemnt their parallax site.

Url: http://www.goodstuph.org/#/home

Hope this help in someway.