This presentation shows how jQuery is used in Drupal, including an overview of how the timelines of both projects relate to each other. It also focuses on specific functionality such as AJAX, AHAH and Drag&Drop

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

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

3. Overview / Timeline

4. 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=quot;my-wrapperquot;></div>');

5. 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

6. 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=quot;text/javascriptquot;>
Drupal.extend({ settings: '. drupal_to_js
(call_user_func_array('array_merge_recursive',
$data)) .quot; });</script>nquot;;

7. 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

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

9. 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

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

11. Ajaxifying Drupal with jQuery
11

12. 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)

13. 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'
);

14. 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,
)
);
}

15. 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);
}

16. 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

17. 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;
});
});
}

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

19. 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

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

21. 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'] = quot;my-elements-weightquot;;
$row = array(...);
$rows[] = array(
'data' => $row,
'class' => 'draggable',
);
drupal_add_tabledrag('my-module-table', 'order',
'sibling', 'my-elements-weight');

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