Last weekend I had the pleasure of presenting a talk on jQuery in Drupal at Drupal Camp Vancouver and I felt it would be worthwhile to follow it up with a blog post where I could re-iterate and elaborate on some of the most important points, as I feel this is an area where there's a lot of confusion in the Drupal world. Indeed it was my own confusion when I was at the point of creating a D6 version of Quick Tabs that led to the idea for the presentation. The sorts of questions I needed answered were, for example:

• how can I implement drag & drop and AHAH in my module?
• can I backport such functionality to the D5 version at all?
• are there best practices for writing jQuery in your Drupal modules?
• do I need to change how I write my jQuery code in Drupal 6?
• what's the story with the jQuery UI plugin I've heard so much about?

I trawled through many threads on drupal.org and on groups.drupal.org/javascript and eventually managed to find answers to pretty much all of my questions. Also of great help to me was the book jQuery in Action (which I've written a rave review of on my personal blog), for the jQuery-specific questions I had. This post aims to save other jQuery/Drupal enthusiasts all that trawling and reading and I hope to eventually incorporate the information somehow into the drupal.org documentation.

In the beginning...

jQuery was introduced into Drupal core with Drupal 5.0, having been chosen over other popular libraries mainly because of its structural similarity to Drupal: small core file providing the minimum basic requirements with a plugin architecture for the fancy stuff; plugins 'hook' into jQuery somewhat analogously to how contrib modules hook into Drupal. So, with your Drupal codebase, in the misc directory, you have jquery.js, along with some Drupal-specific js files, the most important being drupal.js, which governs how the two play together.

Keeping up with evolution

Naturally enough, jQuery continued to evolve after the 1.0.1 version that got into Drupal 5 and the very active community around it went on enriching its functionality with wonderful plugins. One such plugin was the Interface package which offered a lot of really juicy UI enhancements such as draggables, droppables, resizables, etc. The question of how to leverage this great new functionality in Drupal raised two important issues:

• how can jQuery be upgraded in a D5.x install when there are API changes involved?
• what is the best way to include individual jQuery plugins in Drupal modules?

The first problem pertains to the fact that jQuery API changes involve deprecation of methods and selectors, so you can't just replace the jquery.js file in your misc directory with the latest version: modules that have jQuery code written for the old version could break. The second question is about dealing with multiple Drupal modules that want to use the same jQuery plugin. Jeff Robbins' solution to this latter problem was to create the jQuery Interface module providing all the js files and a simple jquery_interface_add() function, which would then act as the de facto method of including Interface in a Drupal module. But Interface required jQuery version 1.1, which meant that the problem of updating jQuery core had to be dealt with first. Thus, the jQuery Update module was born. What it does is not just supply the then current version of jQuery (1.1.2), to replace the version under the misc directory, but also the backward-compatibility file provided by the jQuery team, which ensures that code written for jQuery 1.0.x still works with the new version, plus a fix for the apparently problematic collapse.js.

An up-to-date update?

The jQuery Update module became a requirement for many subsequent jQuery-based modules and seems to have worked well for the most part. Of course, jQuery continued to move along at its own pace of evolution and newer plugins came along requiring even later versions. Although one might expect that there were no API changes until version 1.2 came out, this does not seem to have been the case and so even version 1.1.3 would break certain things that were written for 1.1.2. So jQuery Update could not be easily updated. This has meant that there's been no straight forward way of incorporating any new jQuery plugins requiring anything higher than 1.1.2 in a D5 install: the Form Plugin, the Live Query Plugin, and the amazing successor to Interface, the UI Plugin are all essentially beyond the D5er's grasp.

Now, of course if you happen to be Earl Miles, creator of Panels and Views, you can just go and write your own jQuery to achieve the new functionality but most of us just aren't at that level. However, do not despair – as I write these very words, there are people working to create jQuery Update 2.0 which will bring us up to jQuery 1.2.3 and then all we'll need is a D5 version of Dmitri's UI module (the Drupal 6 module that provides the jQuery UI plugin, in much the same way that the Interface module provided the Interface plugin) and we'll have more draggables, droppables, tabs, accordions, modal dialogs and selectables than we'll know what to do with.

In Part Two we'll look at the changes that Drupal 6 brings from the jQuery perspective, specifically, their implications for how we include jQuery in our modules and the new functionalities that are opened up to us.

Note: full credit to Steve K for the jQuery/Drupal Ninja logo :-)

[Update] Here's the link to Part Two