Thursday, January 22, 2009

Upgrading to jQuery 1.3

Suddenly it's 2009 and jQuery 1.3 has just been released. Upgrading was largely a no-brainer but there were a couple of hurdles. First if using jQuery UI it is necessary to upgrade to version 1.6r5, i.e. a beta release. Hopefully a full release will be available shortly.


Having upgraded to jQuery UI 1.6r5, if you are using the tabs widget there is a bug in the code that is triggered when adding a new tab (ticket #3875). This has just been fixed in trunk. Basically when creating a tab the correct classes weren't being added and the contents of the newly created tab would be displayed on the page. Getting the latest ui.tabs.js from the subversion repository fixes the problem.



Up until now I've been using the jquery.delegate plugin to handle event delegation. I've now switched to using jQuery 1.3 live events. This required some minor surgery on the code. Where previously I had something like:



$("#someDiv).delegate('click change', ".hookAddReq", addRequirement);

I now have:



$(".hookAddReq", "#someDiv").live("click", addRequirememnt);

This bears a little more scrutiny. The class .hookAddReq is assigned to a <select/> element. I have been adding the hook prefix to class names that I use specifically for adding behaviour and I try to add behaviour using classes rather than attaching handlers to HTML elements. There are a couple of reasons for doing this. Firstly by having the hook prefix I know immediately that there is behaviour attached to an element (to distinguish the class name from classes used purely for adding styles). Secondly, using a hook class I can hopefully modify the structure of the HTML without breaking the behaviour.


In the original code I was delegating both the click and change events. This came about because I was developing using Firefox and discovered during testing with IE that the change event doesn't bubble in IE. I guess this is probably documented somewhere but I was scratching my head for a while. Having moved to jQuery 1.3 and actually reading the documentation, live events don't support the change event regardless. I still wanted to be able to delegate those events and I was able to reuse the code I had already written to handle the click events for IE (see below). Effectively just checking to see if the selectedIndex is non-zero and setting it to zero to prevent more than one click event being processed.



addRequirement = function()
{
   var selIdx = this.selectedIndex;
   if (selIdx)
   {
      this.selectedIndex = 0;
      var control = this.options[ selIdx];
      $(view).trigger("addRequirementEvent", $this.control);
   }
};


The other plugin that broke is the excellent jquery.transform that I use to convert XML from the server into HTML on the client. The version I was using still had the @ character in jQuery attribute selectors. This has been fixed in version 3.0.1 released on 20 January.



Finally, the jQuery UI skin needs to be updated. Get the latest from jQuery ThemeRoller.