jQuery whines incessantly
Enough meta whining; what’s the problem?
Drupal developers love jQuery, and hence the jquery_ui module. They also love the Devel module. Unsurprisingly, the developers of the Devel module love jQuery UI as well, and have included portions of the UI API directly within the Devel module. This works nicely until you decide that you love the jQuery UI, and install jquery_ui. When you call jquery_ui_add(array(…)) from your code, if you include any files that the Devel module has already included (an outdated version thereof, I might add), then you’ve got two (nearly) identical files of included code that clash brilliantly.
And hence the lovely error, “$.widget is not a function”. Wouldn’t “$.widget is already defined” make a bit more sense?
Fix it, fix it, fix it!
Fortunately, there are many ways to fix this error.
- Write a patch/Get the authors of the Devel module to add the jQuery UI module as a dependency (and remove the direct jQuery UI includes from the module). Easily the best, but most time-consuming solution.
- Write a patch/Get the authors of the jQuery UI module to check if a given jQuery UI file has already been added via drupal_add_js(). If it has been, don’t include the file again. Might still cause conflicts because of differing versions
- Hack the Devel module:
- Enable the jQuery UI module, and remove the code from the Devel module that includes the jQuery UI files local to the Devel module
- Replace the jQuery UI files in the Devel module with the same files from your jQuery UI installation. Then, in your code, only include the files that the Devel module uses (ui.draggable.js and ui.mouse.js currently) if the Devel module is disabled. This solution takes a bit of effort but might be the quickest workaround.
- etc (I’m sure there are many more options)
Personally, I’m using the last option. The code I’m using to detect whether or not the Devel module is enabled (and act accordingly) is:
if(function_exists('devel_menu')) jquery_ui_add(array('ui.datepicker')); else jquery_ui_add(array('ui.draggable', 'ui.datepicker'));
Thanks to Wei Wang, who tipped me off: http://groups.google.com/group/jquery-ui/browse_thread/thread/675b5fbb64ee7664
Text-version of the error for the Google machine:
$.widget is not a function http://xxx.com/yyy/zzz/ui.draggable.js?6 Line 391
After writing up this post, I realized that the first option is really not that tough. (Note that if you follow these steps, you’ll have to repeat them every time you update the Devel module.) Add the following line to the Devel Themer module’s devel.info:
dependencies = jquery_ui
Now, find the ‘devel_themer_init()’ function in devel_themer.module, and comment out the following lines (104 and 105 for the current version):
drupal_add_js($path .'/ui.mouse.js'); drupal_add_js($path .'/ui.draggable.js');
Immediately following the newly commented out lines, insert the following:
You’re done! Booyah.