JQuery_ Novice to Ninja - Earle Castledine [82]
Additionally, we can perform processing when a request has finished by supplying a callback function. The callback function will be passed three parameters: the response text (the actual data), a string containing the status of the response (fingers crossed for success), and the full response object itself:
$('div#result').load('feed.php', function(data, status, response) {
// Post-processing time!
});
The data and callback parameters to the request are optional, as are the parameters to the callback function itself. This allows you to use syntax as simple or as complex as you require when calling load.
Prepare for the Future: live and die
You have the all-important Ajax component running—so it’s time to show the client. He’s excited. “This is great stuff!” he bellows. “Oh, oh! Can you also make it so the background is highlighted when you move your mouse over the biography?”
“Sure thing,” you say. “That’s just a two-second job …” and you scribble out some simple jQuery below your Ajax code:
$('p#description').mouseover(function() {
$(this).css('background-color','yellow');
});
“There you go,” you say, confidently. But as you refresh the page, you notice that this code fails to work! Why? If you think about it, it makes sense: we’re attaching the event handler to the p#description element when the document loads, but when the document first loads there’s no p#description element! We’re adding it dynamically with Ajax later on. What to do?
We could work around this problem by only adding the mouseover event in the callback function of our Ajax code, but there’s a nicer way: the live method. live lets you bind a handler in a manner similar to what we’ve been doing so far—except that it works for all current and future matched elements. That’s quite amazing; jQuery will remember your selection criteria, and if it sees a match on any new elements that you add, it will attach the event handler!
The syntax is a little different than for regular events, but live is a fantastically powerful feature when using Ajax (or indeed, any time you plan on adding new elements to the page dynamically). To fix up our example above, we’ll rewrite the mouseover event using the live method:
chapter_06/04_live_event_handler/script.js (excerpt)
$('#description').live('mouseover', function() {
$(this).css('background-color', 'yellow');
});
Note: live like Jive or live like Give?
The live function has a corresponding die event—so you might be wondering how to pronounce “live”? Live like jive or live like give? After many heated internal debates, we turned to good old-fashioned research, and we can reveal that the answer is … live like jive!
With this code running, whenever a new element is added that matches #description, our event handler code will be attached. To use live, you specify the event you’d like to handle, and the function you’d like to run when the event is fired. If you want to stop the event from occurring later on, you need to unbind it with the die method:
$('p#description').die('mouseover');
The mouseover event handler will be removed, and will no longer be attached to new elements matching the selector.
Tip: Named Functions
If you attach a named function (rather than an anonymous function) with live, you can remove individual functions by specifying their name as a second parameter to die: $('#el').die('click', myFunction);. This way, any other handlers that you have bound to the element will continue to run.
Fetching Data with $.getJSON
“Now that you have all this Ajax stuff running,” says the client, in an alarmingly offhand manner, “could you just add a list of the latest Twitter comments about celebrities at the top of the page? My investors are coming around this afternoon, and I promised them we’d have Web 2.0 mashup stuff to show them. That should be easy, shouldn’t it? I mean, you already have Ajax working … Thanks.”
A few years ago, the term mashup was coined to describe applications or sites which