jQuery in Drupal:
overview, tools, how-tos
DrupalCamp Vancouver 2008

Introduction
• jQuery is a JavaScript Framework
• In core since Drupal 5 (version 1.0.1)
• Modular, like Drupal itself
• and, like Drupal, constantly evolving...

Overview / Timeline

jQuery Syntax Refresher
• Selectors
– $(‘#myId’), $(‘div.myClass’),
$(‘li:not(.active)’), $(‘a[href^=“mailto”]’)
• Commands
– .hide(), .show(), .slideToggle(), .each(), etc
• Utility Functions
– $.each(), $.get(), $.browser(), $.noConflict()
• Chaining Example
$('div.myClass').not(':first-child').hide().end().filter(':first-child').wrap
('<div class=\"my-wrapper\"></div>');

Important Functions
• drupal_add_js
– Add a JavaScript file, setting or inline code to the
page
– parameters: data, type, scope, defer, cache
– Examples:
• drupal_add_js(drupal_get_path(‘module’,
‘mymodule’) .'/myjs.js');
• drupal_add_js(array(‘myjs’=>$mysettings), ‘setting’);
• Drupal_add_js(‘var myVar = “foo”;’, ‘inline’);
• Use ‘setting’ type to make your module’s
settings available to js

Important Functions
• drupal_get_js()
– called from phptemplate.engine (assigned
to scripts variable)
– makes a call to drupal_add_js() to get the
$javascript array
– $output .= '<script type=\"text/javascript\">
Drupal.extend({ settings: '. drupal_to_js
(call_user_func_array('array_merge_recursive',
$data)) .\" });</script>\\n\";

Important Functions
• drupal_to_js()
– Converts a PHP variable into its JavaScript
equivalent
– e.g. convert a PHP array into a JSON object
– used in the callback function for an AJAX
path

The Drupal JavaScript Object
drupal.js in D5:
var Drupal = Drupal || {};
drupal.js in D6:
var Drupal = Drupal || { 'settings': {},
'behaviors': {}, 'themes': {}, 'locale': {} };

Ajaxifying Drupal with jQuery
• Asynchronous JavaScript and XML
– retrieve data from the server and load into
the DOM of the current page without
refreshing the page
– $(‘#someDiv’).load(‘/serverResource’);
– the above corresponds to about 20 lines of
normal js
• jQuery provides different AJAX
functions, depending on your needs

Ajaxifying Drupal with jQuery
• jQuery AJAX functions:
– $(‘#someDiv’).load(url, parameters,
callback);
– $.get(url, parameters, callback)
– $.post(url, parameters, callback)
– $.ajax(options)

Ajaxifying Drupal with jQuery
11

Ajaxifying Drupal with jQuery
• Basic essentials:
– $.get (or another AJAX method)
– drupal/path (menu callback)
– callback function
• drupal_to_js($var)
– to convert your php array into a JSON
array
• Drupal.parseJSON(data)

Ajaxifying Drupal with jQuery
Menu Callback
$items[] = array(
'path' => 'photostories/get/photos',
'type' => MENU_CALLBACK,
'access' => user_access('access content'),
'callback' => 'kflick_get_photos_ajax'
);

Ajaxifying Drupal with jQuery
Callback Function
function kflick_get_photos_ajax($nid) {
$photo = kflick_get_photo($nid);
$imagefile = theme('image', $photo);
print drupal_to_js(array(
'image' => $imagefile,
)
);
}

Ajaxifying Drupal with jQuery
Drupal.kflick = function() {
var imageDetails = function(data) {
var result = Drupal.parseJson(data);
$('div.field-type-image div.field-item').html(result['image']);
}
$('a.kflick_button').click(function(){
$('a.kflick_button').removeClass('active');
$(this).addClass('active');
$.get('/photostories/get/photos/'+ parseInt(this.id, 10), null,
imageDetails);
return false;
});
}
if (Drupal.jsEnabled) {
$(document).ready(Drupal.kflick);
}

Drupal 6: behaviors
• In D6, wrap all your module’s jQuery
behaviours in a function assigned to
Drupal.behaviors.mymodule
• no need to call it within
$(document).ready() as Drupal
automatically does it for you
• all behaviors can then be reattached to
DOM elements that have come from an
AJAX call

Drupal 6: behaviors
Drupal.behaviors.kflick = function(context) {
$('div.field-type-image:not(.kflick-processed)', context).addClass
(‘kflick-processed’).each(function(){
var imageDetails = function(data) {
var result = Drupal.parseJson(data);
$('div.field-type-image div.field-item').html(result['image']);
}
$('a.kflick_button').click(function(){
$('a.kflick_button').removeClass('active');
$(this).addClass('active');
$.get('/drupal/sandbox/photostories/get/photos/'+ parseInt
(this.id, 10), null, imageDetails);
return false;
});
});
}

Drupal 6: behaviors
Drupal.attachBehaviors = function(context) {
context = context || document;
if (Drupal.jsEnabled) {
// Execute all of them.
jQuery.each(Drupal.behaviors,
function() {
this(context);
});
}
};

What is AHAH?
• Asynchronous HTML and HTTP
• still uses the XMLHttpRequest object
• still uses JavaScript
• loads html content retrieved from the
server directly into the DOM - no
parsing necessary
• AHAH in Drupal = AHAH Forms
• AHAH Forms Framework module
• In core as of D6

AHAH in Drupal 6
$form['qt_wrapper']['tabs_more'] = array(
'#type' => 'submit',
'#value' => t('More tabs'),
'#description' => t(\"Click here to add more tabs.\"),
'#weight' => 1,
'#submit' => array('qt_more_tabs_submit'), // If no
javascript action.
'#ahah' => array(
'path' => 'quicktabs/ahah',
'wrapper' => 'quicktabs-tabs',
'method' => 'replace',
'effect' => 'fade',
),
);

Drag & Drop
drupal_add_tabledrag($table_id, $action, $relationship, $group);
theme('table', $header, $rows, array('id' => 'my-table'));
$form['my_elements'][$delta]['weight']['#attributes']
['class'] = \"my-elements-weight\";
$row = array(...);
$rows[] = array(
'data' => $row,
'class' => 'draggable',
);
drupal_add_tabledrag('my-module-table', 'order',
'sibling', 'my-elements-weight');

Resources
• JavaScript Startup Guide
on api.drupal.org
• drupaldojo.com/lesson/ahah
• http://jquery.com
• Firebug console
• Books
– Learning jQuery
– jQuery in Action