Drupal 7 Module Development

JavaScript in Drupal
• jQuery Form, a plugin to easily and unobtrusively upgrade HTML forms to
use AJAX
• iQuery Once, which filters out all elements that had the same filter applied to
them previously
• jQuery BBQ, a back button and query library
• Farbtastic, a color wheel
Adding JavaScript
Most of the JavaScript written for Drupal utilizes jQuery but it is not a requirement.
When JavaScript is added to the page there are some things to be aware of.
Drupal sets jQuery up to use its no conflict mode. This means that the $ variable is
relinquished so Drupal can work with other JavaScript libraries that may use the $
variable. More detail is available at http://api.jquery.com/jQuery.noConflict.
In the absence of $ there are two methods for writing JavaScript that use jQuery. The
first is to use jQuery in any place where you may have used the $. For example:
jQuery().ready(function() {
...
});
The other way is to wrap your code in an anonymous function and choose an alias.
For example:
(function($) {
$().ready(function() {
...
});
})(jQuery);
In this case jQuery is passed in with the alias of $. Technically, $ can be replaced
with a different valid alias of your choice. This works for JavaScript within a file or
when placed inline on the page.
Drupal has the ability to preprocess JavaScript files where multiple files are
converted into fewer files. Preprocessing provides a performance improvement for
end uses as they have fewer files to download. For the preprocessor to create valid
JavaScript it is recommended that at places where optional JavaScript semicolons
are allowed, they should be used. In the preceding example, the semicolon after the
closing (jQuery) is an example of where to use the optional semicolons.
[ 288 ]