Scribd
Upload
51 views

Jquery in Drupal: Overview, Tools, How-Tos: Drupalcamp Vancouver 2008

This document provides an overview of using jQuery in Drupal, including important functions, behaviors, AJAX, and drag and drop functionality. It discusses how jQuery is included in Drupal core, syntax, selecting and manipulating elements, adding JavaScript, converting PHP to JavaScript, and attaching behaviors. It also covers using jQuery for asynchronous requests, AHAH forms, and tabledrag to enable drag and drop on tables.

Uploaded by

Arifin Chowdhury
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views

Jquery in Drupal: Overview, Tools, How-Tos: Drupalcamp Vancouver 2008

This document provides an overview of using jQuery in Drupal, including important functions, behaviors, AJAX, and drag and drop functionality. It discusses how jQuery is included in Drupal core, syntax, selecting and manipulating elements, adding JavaScript, converting PHP to JavaScript, and attaching behaviors. It also covers using jQuery for asynchronous requests, AHAH forms, and tabledrag to enable drag and drop on tables.

Uploaded by

Arifin Chowdhury
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like