jQuery Changes From 1.4.2 to 1.6

jQuery is a powerful library and it is possible to get by without using any of the new features. That’s why many of us just upgrade to a new version assuming that it is mostly bug and performance fixes. This is not the case. jQuery 1.4.2 was released in February 2010 and it’s been one and a half years and a number of releases since then.

I was going to write about the changes in 1.5 and 1.6, but I have noticed that many people have missed some of the new features of the 1.4 releases. And by the way, all examples are written in Coffeescript.

Selected changes from 1.4.2+

delegate()

Most people know about live() and how it can be used to attach listeners to elements that don’t yet exist in the DOM. live() has a younger brother that was born in 1.4.2 and he is called delegate(). delegate() is more powerful. It gives you more precision in where to attach the listener.

$('.main-content').find('section').delegate 'p', 'click', -> 
  $(this).addClass 'highlight' 

As you can see above, delegate(), unlike live(), can be chained like normal jQuery calls.

jQuery.now(), jQuery.type() and jQuery.parseXML()

Nothing special here, just some utilities that are good to know about.

$.now() is (new Date()).getTime() 
 
$.type('hello') is 'string' 
 
xml = """ 
<rss version='2.0'> 
<channel> 
<title>RSS Title</title> 
</channel> 
</rss> 
""" 
xmlDoc = $.parseXML xml 
($(xmlDoc).find 'title').text() is 'RSS Title' 

All these utilities are interesting, but the truly good thing that came out of jQuery-1.5+ is Deferred().

Deferred()

With the release of jQuery 1.5 the internal implementation of $.ajax was changed to use Deferred(), and, even better, the implementation was deemed so useful, that it became part of the public API.

Here is how you can use it via the $.ajax method.

Declare a function hex that calls the /hex url on the server, which will return a hex value between 00 and FF.

  hex = -> 
    $.ajax { url: '/hex' } 

Call the function multiple times, and you get a new Deferred back for each call. Notice the lack of handlers for the calls.

  red = hex() 
  green = hex() 
  blue = hex() 

Attach handlers to each of the Deferreds to do something useful with the returned value. Notice the use of done instead of success. success is deprecated and will be removed in 1.8.

  red.done (hh)-> 
    $("#r").css 'background-color', "##{hh}0000" 
  green.done (hh)-> 
    $("#g").css 'background-color', "#00#{hh}00" 
  blue.done (hh)-> 
    $("#b").css 'background-color', "#0000#{hh}" 

I am not limited to adding one handler, I can attach as many as I like. Here I attach another one for logging the success of the red-call.

  red.done (hh) -> 
    console.log(hh) 

If this was all there was to it, I would be happy, but it is not by using the $.when method I get a new Deferred object that orchestrates multiple Deferreds in a very simple way. Let me create a color-Deferred that waits for the others to return and then calls a new callback when they are all done.

  color = $.when(red, green, blue) 
 
  color.done (r, g, b) -> 
    $("#color").css 'background-color', "##{r[0]}#{g[0]}#{b[0]}" 

The results from the requests are given in the same order as the Deferred objects are passed in. The results are given as an array with three arguments [ data, ‘success’ , deferred ].

You can see the example, a simple Sinatra app, in action on Heroku and the source code can be found on Github

Very nice! Apart from the examples I have shown, there are methods working with Deferred. Methods for creating, jQuery.Deferred(), resolving, resolve(), resolveWith(), and rejecting, reject(), rejectWith().

To attach handlers to the events, you can use done() for resolve, fail for reject, always() for both resolve and reject. You can also use then(doneCallback, failCallback) to attach both a done and a fail handler with one call.

Deferreds are really cool, check them out here