jqueryindrupal-1210618056493141-8

7/30/2019 jqueryindrupal-1210618056493141-8

1/22

jQuery in Drupal:

overview, tools, how-tos

DrupalCamp Vancouver 2008

7/30/2019 jqueryindrupal-1210618056493141-8

2/22

Introduction

jQuery is a JavaScript Framework

In core since Drupal 5 (version 1.0.1)

Modular, like Drupal itself

and, like Drupal, constantly evolving...

7/30/2019 jqueryindrupal-1210618056493141-8

3/22

Overview / Timeline

7/30/2019 jqueryindrupal-1210618056493141-8

4/22

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('');

7/30/2019 jqueryindrupal-1210618056493141-8

5/22

Important Functions

drupal_add_jsAdd 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 modulessettings available to js

7/30/2019 jqueryindrupal-1210618056493141-8

6/22

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

Drupal.extend({ settings: '. drupal_to_js(call_user_func_array('array_merge_recursive',$data)) ." });\n";

7/30/2019 jqueryindrupal-1210618056493141-8

7/22

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

7/30/2019 jqueryindrupal-1210618056493141-8

8/22

The Drupal JavaScript Object

drupal.js in D5:

var Drupal = Drupal || {};

drupal.js in D6:

var Drupal = Drupal || { 'settings': {},'behaviors': {}, 'themes': {}, 'locale': {} };

7/30/2019 jqueryindrupal-1210618056493141-8

9/22

Ajaxifying Drupal with jQuery

Asynchronous JavaScript and XML retrieve data from the server and load into

the DOM of the current page withoutrefreshing the page

$(#someDiv).load(/serverResource);

the above corresponds to about 20 lines of

normal js jQuery provides different AJAX

functions, depending on your needs

7/30/2019 jqueryindrupal-1210618056493141-8

10/22


jQuery AJAX functions:

$(#someDiv).load(url, parameters,

callback);

$.get(url, parameters, callback)

$.post(url, parameters, callback)

$.ajax(options)

7/30/2019 jqueryindrupal-1210618056493141-8

11/22

11


7/30/2019 jqueryindrupal-1210618056493141-8

12/22


Basic essentials:

$.get (or another AJAX method)

drupal/path (menu callback)

callback function

drupal_to_js($var)

to convert your php array into a JSONarray

Drupal.parseJSON(data)

7/30/2019 jqueryindrupal-1210618056493141-8

13/22


Menu Callback

$items[] = array(

'path' => 'photostories/get/photos',

'type' => MENU_CALLBACK,

'access' => user_access('access content'),

'callback' => 'kflick_get_photos_ajax'

);

7/30/2019 jqueryindrupal-1210618056493141-8

14/22


Callback Function

function kflick_get_photos_ajax($nid) {

$photo = kflick_get_photo($nid);

$imagefile = theme('image', $photo);

print drupal_to_js(array(

'image' => $imagefile,)

);

}

7/30/2019 jqueryindrupal-1210618056493141-8

15/22

Ajaxifying Drupal with jQueryDrupal.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);}

7/30/2019 jqueryindrupal-1210618056493141-8

16/22

Drupal 6: behaviors

In D6, wrap all your modules jQuerybehaviours in a function assigned to

Drupal.behaviors.mymodule no need to call it within

$(document).ready() as Drupalautomatically does it for you

all behaviors can then be reattached toDOM elements that have come from anAJAX call

7/30/2019 jqueryindrupal-1210618056493141-8

17/22

Drupal 6: behaviorsDrupal.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;

});

});

}

7/30/2019 jqueryindrupal-1210618056493141-8

18/22

Drupal 6: behaviorsDrupal.attachBehaviors = function(context) {context = context || document;

if (Drupal.jsEnabled) {// Execute all of them.jQuery.each(Drupal.behaviors,

function() {this(context);

});}};

7/30/2019 jqueryindrupal-1210618056493141-8

19/22

What is AHAH?

Asynchronous HTML and HTTP

still uses the XMLHttpRequest object

still uses JavaScript

loads html content retrieved from theserver directly into the DOM - no

parsing necessary AHAH in Drupal = AHAH Forms

AHAH Forms Framework module

In core as of D6

7/30/2019 jqueryindrupal-1210618056493141-8

20/22

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',

),);

7/30/2019 jqueryindrupal-1210618056493141-8

21/22

Drag & Drop

theme('table', $header, $rows, array('id' => 'my-table'));

$row = array(...);$rows[] = array('data' => $row,'class' => 'draggable',);

drupal_add_tabledrag('my-module-table', 'order','sibling', 'my-elements-weight');

$form['my_elements'][$delta]['weight']['#attributes']['class'] = "my-elements-weight";

drupal_add_tabledrag($table_id, $action, $relationship, $group);

7/30/2019 jqueryindrupal-1210618056493141-8

22/22

Resources

JavaScript Startup Guideon api.drupal.org

drupaldojo.com/lesson/ahah

http://jquery.com

Firebug console

Books Learning jQuery

jQuery in Action

jqueryindrupal-1210618056493141-8

Documents