How to use mootools with jQuery in Drupal

If you have used Drupal for a while, you may notice jQuery in Drupal 5. If you visit www.ubuntu.com, you may also notice that it looks like Drupal right now. According to this post, Matt Nuzum confirmed that it is Drupal. This site looks very beautiful. The most interesting is that it uses mootools which is another javascript library. Actually, mootools should conflict to jQuery. So the question is how to use mootools in Drupal site.

The real problem of jQuery and mootools for co-existing is that it use $() as shortcut. jQuery offers jQuery.noConflict() for changing this shortcut to other thing else. However, it means you have to patch core javascripts in Drupal. An issue has been posted for a week and I hope to get some response. Back to ubuntu.com, it uses mootools in Drupal. That is the fact. After thinking for a day, I found a trick to accomplish this goal.

The trick is to have 2 themes.

  1. The theme for anonymous visitors, e.g., what we see at ubuntu.com.
  2. The theme for webmasters, e.g., garland.

The first theme will include mootools in theme level while anonymous visitors don't have permission to see any pages produced by Form APIs. In other words, everything we see in the site are read-only so jQuery will never be invoked. The second theme is only used by authenticated users aka webmasters. This theme will never invoke mootools.

I'm not sure this is the trick used at ubuntu.com but it should work as a workaround for all of us. Another approach is to use jQuery instead of mootools.

Tags: , ,

Post new comment