Deep Linking with jQuery

jQuery

You can view a demo and download the resources for this tutorial at the bottom of the post.

Web 2.0 websites have a lot of Ajax functionality, some times when you load a new element of a page you may want the user to be able to click the back or forward button so that they can see the previously loaded content. One method to add this function to a website is to use the jQuery Address plugin with jQuery.

jQuery Address has 4 main methods; init, change, internalChange, externalChange. The init method is what is called when the plugin is initiated. The change method is called when the URL is changed, an element in the page is changed or either the forward or backward button is pressed. The change method has the combined functionality of internalChange and externalChange. The internalChange is only called when a hyperlink inside the page is clicked; externalChange is only called when the URL is changed or the backward or forward button is pressed.

To allow deep linking within your website the only two methods that are required is init and change, you can then use internalChange and externalChange wherever you may need them.

Getting it to work

The first thing that is required of course is that you download the file for jQuery Address. When you have done this copy the jquery.address-1.1.min.js file into the same location as your index.html file.

Now we include jQuery and the jQuery Address plugin, put this inside the head tags in your html file:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
</script>
<script src="jquery.address-1.1.min.js"></script>

The jQuery

The next thing that we're going to do is create a function that will be called when a hyperlink is clicked so that we know what file to load and where to load it. We will call this function loadURL(), it will take one parameter named url.

function loadURL(url) {
	    	console.log("loadURL: " + url);
	    	$("#area").load(url);
}

We have console.log so that when we open up Firebug in Firefox we know which page is being requested. This is useful for debugging if there are any faults with the requested page loading.

We now set the jQuery Address event handlers so we know when to deep link an element within the page.

$.address.init(function(event) {
	        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
	    	$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
	    	console.log("change");
})

What this code does is retrieves the href attribute from a hyperlink by matching the rel to a hyperlink. We also log when it should have changed so we can see this in Firebug.

The last bit of jQuery that we do will check when a link has been pressed and then call the loadURL() function that we created before.

$('a').click(function(){
	    	loadURL($(this).attr('href'));
});

This is what the head of your file should look like:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>TheTutorialBlog.com : jQuery Deep Linking</title>
	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1.4.1");
	</script>
	<script src="jquery.address-1.1.min.js"></script>
 
 
	<script type="text/javascript">
	/*<![CDATA[*/
	$("document").ready(function(){
 
	    function loadURL(url) {
	    	console.log("loadURL: " + url);
	    	$("#area").load(url);
	    }
 
 
	    // Event handlers
	    $.address.init(function(event) {
	        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
	    }).change(function(event) {
	    	$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
	    	console.log("change");
	    })
 
	    $('a').click(function(){
	    	loadURL($(this).attr('href'));
	    });
 
	    });
 
	/*]]>*/
	</script>
</head>

The HTML

The HTML for this is really basic stuff, we will create two hyperlinks that will load two separate files. We will also create a div element named area, this is where the files will be loaded.

<body>
 
 
	<a href="test1.html" rel="address:/test1">Test 1</a> <br />
	<a href="test2.html" rel="address:/test2">Test 2</a> <br /> <br /> <br />
 
	Load Area: <br />
	<div id="area"></div>
 
 
</body>

The name of the file that you want to load goes inside the href tag. You also need to include address:/ inside rel. This is how jQuery Address knows what hyperlinks you want to deep link.

Final words

I hope this tutorial has been useful, please feel free to leave a comment or ReTweet this tutorial on Twitter.

Demo and Download

Demo
Download

Bookmark and Share
Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • email
  • FriendFeed
  • LinkedIn
  • Ping.fm
  • Tumblr
  • Twitter

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

, , , , , , , , , , ,

5 Responses to Deep Linking with jQuery

  1. Jay March 30, 2010 at 12:25 am #

    any idea why this doesn't work with mozilla firefox?

    I used a similar setup, and it works fine in Chrome, but when looking at the console in firefox a warning comes up : e.success.call is not a function
    http://localhost/webDev/lostine/wp-content/themes/lostine/js/jquery-1.4.1.min.js
    Line 121

    I used the .post() function, but tried .load() as well and they have similar issues

  2. grigzie May 14, 2010 at 7:05 pm #

    Hi Wez,

    Thanks for the great tutorial - I got almost everything working within minutes.

    But I have a problem - the page seems to load into the #area div twice. Although this is imperceptible in your demo, when you start using more content it becomes noticeable. This is amplified if you try and add some jQuery animation!

    I was wondering what I could do to prevent this from happening?

    Thanks again for such an insightful tutorial.

    Andrew

  3. grigzie May 14, 2010 at 7:59 pm #

    I've fixed the double loading issue by changing:

    // Event handlers
    $.address.init(function(event) {
    console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
    }).change(function(event) {
    $("#area").load($('[rel=address:' + event.value + ']').attr('href'));
    console.log("change");
    });

    with:

    // Event handlers
    $.address.externalChange(function(event) {
    console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
    $("#mainContent").load($('[rel=address:' + event.value + ']').attr('href'));
    }).change(function(event) {
    console.log("change");
    });

    My next problem is that it will go backwards over divs that have been loaded via AJAX but won't go back to the initial page (the content that was originally loaded in the #area div before the AJAX loaded content entered the #area div).

    Any help would be much appreciated!

    Thanks again,
    Andrew

  4. grigzie May 14, 2010 at 8:02 pm #

    NB: In the last post the DIV ID should have read #area where it reads #mainContent.
    Sorry!

  5. Alex November 25, 2010 at 12:13 pm #

    Unfortunately this does not work in Firefox 3.6.12 :(

Leave a Reply