Posted on January 28, 2008 // Short URL

Javascript/JQuery in Drupal

John Resig joins Nate Haug, James Walker, Matt Westgate, Jeff Eaton, and Jeff Robbins in a discussion about how JavaScript and JQuery are used in Drupal, the JavaScript-related changes for Drupal 6, the new features brought by JQuery 1.2, and general strategies for using JavaScript in Drupal.



Packer correction :)

John Resig on board, how cool - great work. A bit sad he didn't have a more prominent place in the podcast though...

A correction about the compression (Packer) you were talking about. jquery.js in Drupal 5 is "packed". I guess it's the default packed file from of v1.0.4, so no php port of Dean Edward's Packer involved there. From what I know, in Drupal 6 the server side compression of JavaScript files was removed (now it only merges the files). jquery.js is still packed though from start (the default packed file from there as well I would guess).


Paul Moers

other frameworks possible?

As jQuery is part of the core it's quite difficult to use other frameworks with Drupal. Will it become easier to do this? Now one has to manually get jQuery running in compatibility mode and probably change every $ (of every module too) to jQuery because the framework you want to go and use has a $ function too. So will jQuery be running in compatibility mode and will jQuery be used instead of $? Or maybe some other wonderful rescuing thing?



Library Compatibility

There is a rescuing thing. You can wrap existing jQuery-dependent code in an anonymous function:

(function($) {
// Existing code...

It should flawlessly scope only the $ variable to jQuery if the code is well-written. By well-written, I mean that it introduces global variables (if any is necessary) through window.x instead of var x. Sadly, most JavaScript code in Drupal isn't wrapped yet, even though I recall Steven saying that he planned something like that. I may write core JavaScript patches and propose them. Reply

Tao Starbow

Getting all of Drupal jQuery

Getting all of Drupal jQuery namespaced would be an excellent goal for Drupal 7. If anyone is curious how this could work, they can check out jQuery UI Backport for an example of using jQuery namespacing to get Drupal 1.2.1 and Drupal 1.0.4 running on the same page.



So far I've ignored the AHAH

So far I've ignored the AHAH framework completely. Now, I am sure that it'll be a big help for a project I am currently working on. Thanks a lot for opening my eyes and the good show.



Hey Ya'll, Thanks for

Hey Ya'll,

Thanks for another great lbpc! That 'liveQuery'? discussion was very interesting.

//me off to learn more about this


Rob Loach

jQuery Plugin Manager

You guys talked about a utility module that would manage a repository jQuery plugins on a Drupal site for other modules? There's a new module called jQ

The jQ module allows other modules to register jQuery plugins in a central repository, and allows administrators of a site to enable or disable specific plugins globally.

... Sounds very promising!


Aaron Winborn


Yes, the jQ module is written just for this purpose. Allows developers to call a jQuery plugin with a simple jq_add('hoverIntent'); or jq_add('jCarousel', 'my-skin'); without having to look up the specific call to invoke a plugin. This also allows administrators to see what plugins are installed on a server from a settings page. Finally, allows a jQuery wrapper module developer to add a plugin without having to take care of the housekeeping, and allowing, again, admins to see it grouped logically with other installed/enabled plugins.

The module doesn't provide any plugins itself; rather, it's a helper module for other jquery wrappers. It is distributed with a bridge module to support jquery plugin modules that haven't (or don't wish to) support jQ yet.

Current plugins supported: hoverIntent, Magnifier, Cluetip, and jCarousel. More on the way.



You mentioned that many

You mentioned that many drupalers might not notice that the jqueryness of D6 will actually drive in traffic.

I was actually ready to leave Drupal after I finish my current project specifically because of D5 jquery. Locking users down to jquery 1.0.1 (even with jquery_update.module to 1.1.2) essentially prevents developers from using jquery. Honestly! If I can't use the new features of jquery because of a version lock-down, and I really want those features, then I'll find them elsewhere in other js frameworks like scriptaculous and prototype.

However, when I go to these other frameworks, they either break my jquery, or my jquery breaks them. And since I've decided not to use jquery in the first place, since I'm limited to an older version, that's a real nuisance. If these other frameworks break jquery (which I don't even want anymore), and Drupal depends on jquery to function (fieldsets, etc), then I can't use any js framework!

After a couple of months wrestling with this issue, I decided F drupal -- I'm going Rails or something. You don't realize how golden are your words on D6's new jquery update-ability. I am staying in Drupal solely because of that.



UI makes bindings sticky?

John mentioned a secondary, yet powerful feature of UI. That jQuery bindings like $('.foo').click(function(){ /* Do something */ }); become 'sticky'. Meaning that they work even on DOM that is created through javascript instead of markup.

I have reached a blocking issue in a project where this feature would solve the issue, but cannot find ANY documentation on this feature nor make it work.

Does anyone have any links?



Microphone Pop

You *seriously* need to use screens between your microhpones and your mouths. Too much pop and breathing on the microphone makes it *way* difficult to listen on headphones (only option at work). Thanks.