Update on jQuery Update

First off, a slightly overdue update: jQuery Update module for Drupal 5 has been released with jQuery 1.2.6 (the current version!). Thanks to all who took the reigns on that one, especially Steve McKenzie, who took on co-maintainership, and sun, who pushed this rc1 release. I believe all known bugs that the new jQuery caused in core js files, such as upload.js, collapse.js and others, have been totally ironed out but of course jQuery-enhanced contrib modules are another matter entirely. I found out the hard way that the upgrade to 1.2.6 totally breaks TinyMCE which unfortunately is a module that is not receiving much love these days from its maintainer. Not to get too far off-topic but there is a new WYSIWYG controller and API/framework module called Wysiwig being developed by sun and quicksketch, the goal of which is "to provide generic hooks to implement contrib module plugins with content editors", so it sounds like TinyMCE module's days are numbered anyway.

Meanwhile, over in the land of Drupal 6

The jQuery version that ships with 6 is already showing its age - it is now 3 versions behind and so missing some important bug fixes. Luckily webchick has been busy porting jQuery Update module to D6 so it now can have the latest version also. And thanks to some page preprocess magic that I have yet to get my head around, using the module doesn't involve copying new versions of js files into your misc directory - all you have to do is enable it and you're done. The module tinkers with the $scripts variable so that the script tags that get output point to the new js files in the module's /replace subdirectory instead of the old ones in the misc directory. And as if that wasn't helpful enough it even allows you to choose between the packed, minified and uncompressed jQuery scripts. Wow.

Nitty gritty example section

<technicalJargon>
In the last post we looked at Drupal.behaviors and how this new property of the Drupal js object makes jQuery bindings on ajax-generated content a piece of cake. In this post I wanted to explore Drupal.themes. Except there doesn't seem to be anything to explore. In Drupal.js the Drupal object is initialized as follows: var Drupal = Drupal || { 'settings': {}, 'behaviors': {}, 'themes': {}, 'locale': {} }; Now, I've seen Drupal.settings, Drupal.behaviors and even Drupal.locale in action, but I grep'd my entire D6 install and could find no reference to Drupal.themes anywhere. I'm thinking this must be a placeholder property for which some future use has been envisioned. If anyone out there knows otherwise, please help to enlighten the rest of us. Drupal.theme, on the other hand (note the lack of 's') is most definitely an active part of js life in Drupal. This is the JavaScript counterpart to the server-side theme function. Here's what it looks like: Drupal.theme = function(func) {
for (var i = 1, args = []; i < arguments.length; i++)
{
args.push(arguments[i]);
}

return (Drupal.theme[func] || Drupal.theme.prototype[func]).apply(this, args);
}; So, when you make a call to Drupal.theme(), you pass in a function name as your first argument and all subsequent arguments will be arguments to be passed to that function. The function you pass in will need to be a prototype object of Drupal.theme, an example of which is below: Drupal.theme.prototype.myThemeFunction = function (left, top, width) {
var myDiv = '<div id="myDiv" style="left:'+ left +'px; top:'+ top +'px; width:'+ width +'px;">';
myDiv += '</div>';
return myDiv;
}; And here's how you would call it: Drupal.theme('myThemeFunction', 50, 100, 500); See here for the official documentation on this.

Another server-side Drupal function that has made it over to the client side is the t() function. Drupal.t() will translate the strings in your js code using the Drupal.locale property which should have been populated with all the required strings by the language module, assuming you have all your translations set up properly.
</technicalJargon>

Great new uses of jQuery in Drupal admin

Modal dialogs using js overlays are all the rage these days. We've had Thickbox and Lightbox for some time but this type of overlay is also really useful for improving admin interface usability. The jQuery User Interface library, for which there's now a Drupal module, thanks again to webchick, lets you turn pretty much anything into such a dialog. Apparently it's as easy as "$("#myDiv").dialog();" but I'm not speaking from experience as I haven't had a chance to try it out. However, starbow has been working on incorporating this feature into the Drupal admin interface and it will hopefully be part of core in Drupal 7. To quote from the issue thread for this:

This patch solves the usability issue on the blocks page created when a user has made changes and then clicks a link such as "configure" and loses all of their work. It does so by introducing the infrastructure for modal dialogs, and creating an Unsaved dialog that can be applied to links on a page with unsaved changes. The Unsaved dialog offers the user the opportunity to save their work, to proceed and lose their changes, or to cancel.

But it also allows for the general dialog functionality to be leveraged elsewhere on the site. Because the change didn't make it into Drupal 6, starbow made a module out of it, which implements dialogs on the URL aliases page. This makes for incredibly quick and easy url alias administration and once you've seen it in action it doesn't take much imagination to see how this could be implemented on many other admin pages and non-admin pages too. And with sites like Facebook making this type of user interface feature extremely common, it's great to be able to implement it so easily now in Drupal.