Introduction to
jQuery in Drupal

Matt Farina
Developing for web since 1996
Coded In Over 10 Languages
Developer at Tree House Agency
Drupal and jQuery Developer
I Used To Build Military Tanks

A Little History
jQuery chosen for drupal core before
release of jQuery 1.0
jQuery 1.0.4 shipped with drupal 5
Drupal 5 used jQuery to spruce up
interface
jQuery 1.2.3 shipped with Drupal 6
Drupal 6 translations, themes, libraries
Currently jQuery 1.2.6 in Drupal 6
Drupal 7 to ship with latest version of
jQuery (current Dev is 1.3).

Add JavaScript In
Your Theme

Printing Scripts In Your Theme
In your page.tpl.php file(s) include:
<?php print $scripts; ?>

The Default script.js file
/sites/all/themes/mytheme
/sites/all/themes/mytheme/
mytheme.info
/sites/all/themes/mytheme/script.js
by default script.js will be included

Defining Scripts in .info
In you mytheme.info file:
scripts[] = ascript.js
scripts[] = jquery.plugin.js
scripts[] = bscript.js

Order of Files
Core (jQuery.js and drupal.js)
Module JS Files
Theme JS Files

Add Scripts
Programatically
drupal_add_js()

drupal_add_js()
Add JS Files
Add Inline JS
Add JS Settings/Variables

Add A File
drupal_add_js(‘/path/to/file.js’);

Add A File
drupal_add_js(drupal_get_path(‘module’,
‘mymodule’) . ‘/file.js’);

Add A File
drupal_add_js(drupal_get_path(‘module’,
‘mymodule’) . ‘/file.js’);
Drupal_add_css(drupal_get_path(‘module’
, ‘mymodule’) . ‘/file.css);

Add Inline JavaScript
drupal_add_js(“alert(‘Drupal Owns You’)”, ‘inline’);

Drupal Settings/Variables
The PHP:
$myvars = array(
‘mymodule’ => array(
‘myvar’ => ‘myvalue’,
),
);
drupal_add_js($myvars, ‘setting’);
The JavaScript:
alert(Drupal.settings.mymodule.myvar);

drupal_add_js()
drupal_add_js($data = NULL, $type = 'module',
$scope = 'header', $defer = FALSE, $cache =
TRUE, $preprocess = TRUE)
Data
Type
Scope
Defer
Cache
Preprocess

Preprocess
Administration >> Settings >> Performance

Drupal Libraries

Translating Stuff
PHP Translating:
t(‘my translatable text’);
JavaScript:
Drupal.t(‘My Translatable Text’);

Translating Stuff
var args {};
args[‘@count’] = 2;
Drupal.t(‘My Translatable @count’, args);

Translating Stuff
!variable: inserted as is
@variable: escape plain text to HTML
(Drupal.checkPlain)
%variable: escape text and theme as a
placeholder for user-submitted

Translating Stuff
var args {};
args[‘@count’] =
Drupal.formatPlural(Drupal.settings.mym
odule.count, ‘1 thing’, ‘@count things’);
Drupal.t(‘My Translatable @count’, args);

Theming
$(‘#myselector’).html(‘<h2>my title</h2>’);

Theming
$(‘#myselector’).
html(Drupal.theme(‘mythemefunction’,
‘mytitle’));

Theming
Default Theme Function:
Drupal.theme.prototype. mythemefunction
= function(text) {
return ‘<h2>’ + text + ‘</h2>’;
}
Overriding it:
Drupal.theme.mythemefunction =
function(text) {
return text;
}

Other Libraries
Drag and Drop Lists
AJAX
Resizable Text Areas
Autocomplete
A lot more.....

jQuery UI Module
http://drupal.org/project/jquery_ui

But, I Want A
Newer Version Of
jQuery!!!!!

jQuery Update
Module
http://drupal.org/project/jquery_update

Drupal Behavior
Drupal.behaviors.comment = function (context) {
var parts = new Array("name", "homepage", "mail");
var cookie = '';
for (i=0;i<3;i++) {
cookie = Drupal.comment.getCookie('comment_info_' +
parts[i]);
if (cookie != '') {
$("#comment-form input[name=" + parts[i] +
"]:not(.comment-processed)", context)
.val(cookie)
.addClass('comment-processed');
}
}
};

Q&A