• Choose a category
• All
• Classic-Fiction

Once we have our catalog, we’ll insert a regular old list of links into the StarTrackr! page. We should then be able to click through to the correct biography page:

chapter_06/02_hijax_links/index.html (excerpt)

• Baron von Jovi
• The Computadors
• Darth Fader
• Mo' Fat

We’ve added an extra div underneath the list. This is where we’ll inject the response from our Ajax calls. The next step is to intercept the links—and do some Ajax:

chapter_06/02_hijax_links/script.js (excerpt)

$('#biographies a').click(function(e) {

var url = $(this).attr('href');

$('#biography').load(url);

e.preventDefault();

});

First, we select all the links inside the unordered list, and prevent the default event from occurring (which would be to follow the link and load the target page). We grab the original destination of the link (by retrieving the href attribute of the link we clicked on), and pass it onto the load function.

This code works perfectly, but injecting the entire contents of the page turns out to be a bit problematic. Our new content contains

tags, which should really be used to give the title of the entire page, instead of a small subsection. The problem is that we don’t necessarily want to load the entire page via Ajax, just the bits we’re interested in. And once again, jQuery has us covered …

Picking HTML with Selectors

The load action lets you specify a jQuery selector as part of the URL string. Only page elements that match the selector will be returned. This is extremely powerful, as it lets us build a complete and stand-alone web page for our regular links, and then pull out snippets for our Ajax links.

The format for using selectors with load is very simple: you just add the selector string after the filename you wish to load, separated with a space:

$('#biography').load('computadors.html div:first');

The selector you use can be as complex as you like—letting you pick out the most interesting parts of the page to pull in. For our StarTrackr! biographies, we’d like to display the information contained in the description section. We’ll modify the code to look like this:

chapter_06/03_load_with_selector/script.js (excerpt)

var url = $(this).attr('href') + ' #description';

Be sure to include a space before the hash, to separate it from the filename. If you run this version, you’ll see that now only the description div is loaded in. We will have a proper look at adding loading indicators very soon, but until then you can code up a quick and dirty solution: just replace the target element’s text with “loading …” before you call load. Again, with your files sitting on your local machine, you’ll never see the loading text, but it’s good to know how to do it:

chapter_06/03_load_with_selector/script.js (excerpt)

$('#biography').html('loading…').load(url);

There you have it! Ready to show the client. But since it only took us 15 minutes, perhaps we should look into the load function’s nooks and crannies a little so we can spruce it up even more.

Tip: The Entire Page Is Still Loaded

You might think that specifying a selector could be a sneaky way to reduce the bandwidth of your Ajax calls. It doesn’t work that way, unfortunately. Regardless of whether or not you add a selector, the entire page is returned, and then the selector is run against it!

Advanced loading

There are a few additional tweaks you can make to your load calls if you need to. A common requirement is to specify some data to pass along to the server; for example, if you had a search function that returned information based on a query string, you might call it like this:

$('div#results').load('search.php', 'q=jQuery&maxResults=10');

The second parameter passed to load is called data. If you pass in a string (as we did above), jQuery will execute a GET request. However, if you