Upgrading to jQuery 1.9.x

Today it snowed. It started before we awoke and pretty much kept at it all day. Hence it was a day to do some work inside, and what better task than to clean up my blog? First port of call, and a major one at that, was to upgrade to jQuery 1.9.

Before you say, so what, just change the version number in the <script> tag, consider this. jQuery 1.9 removes several APIs that “behaved inconsistently or inefficiently in the past” (here), ones that have been deprecated for a while. So, replacing the version number willy-nilly might break some code. Can’t have that.

The jQuery team have mitigated the problem by providing the jQuery Migrate plugin. This has two main benefits: it firstly adds back the removed APIs so that you can continue as before (however, doing so comes with some caveats), and secondly, when you use the un-minified version instead of the production version, it not only does that but also writes warning diagnostic messages to the console if such APIs are used. You can then use these messages to work out which JavaScript code needs to be changed and, by using the Upgrade Guide, fix the problems. And, in general, the fixes are quite easy.

After updating the jQuery version number ion my HTML and adding a new script tag to reference the uncompressed Migration plugin, I found I had one problem in my own code: the "hover” pseudo-event no longer exists.

This was my original code that triggered the warning:

sidebarDiv.unbind("hover");

In essence: unbind the hover event handler from the DOM element called sidebarDiv. Now, although bind() and unbind() are still valid, the documentation for them explicitly state that the new on() and off() methods are preferred to add or remove event handlers. OK, then. The removal code was pretty simple to fix, especially as the new methods allow for a space-delimited list of events, instead of just one at a time:

sidebarDiv.off("mouseenter mouseleave");

The setting of the hover event handler was a little more involved. The original API allowed for two callback functions to be defined in the one call:

sidebarDiv.hover(function () {
    mouseInside = true;
  },
  function () {
    mouseInside = false;
  }
);

but the new separate event types would either mean two separate calls to set the handlers, or a more clever handler. I went with the second route, using the passed in parameter to get at the event type:

sidebarDiv.on("mouseenter mouseleave", function (event) {
  if (event.type === "mouseenter") {
    mouseInside = true;
  }
  else {
    mouseInside = false;
  }
});

After that I just modified the other (albeit still valid) calls to bind() and unbind() I had in the code to use the new APIs just to be consistent.

And I’d have to say that was pretty much it for me. I had to update a third-party library I was using (a new version was available that supported jQuery 1.9), but nothing else was being flagged by the Migration plug-in. Score!

(Oh, I also added a drop cap for the initial paragraph for each blog post. Just because. To find out how, go here. I used the second method, which requires CSS3 support in the browser.)

  Loading links to posts on similar topics...