JQuery In Drupal

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

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

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

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

http://www.slideshare.net	256
http://raselkabir.wordpress.com	86
http://drupal.hostsh.com.br	75
http://hostsh.com.br	64
http://drupalranch.com	57
http://www.katbailey.net	36
http://www.hostsh.com.br	27
http://www.drupal.hostsh.com.br	19
http://katbailey.net	17
http://html-thienvo	7
http://www.netola.net	5
http://localhost	4
http://drbool.net	3
http://www.agglom.com	3
http://www.drupalranch.com	2
http://64.233.169.104	1

JQuery In Drupal

by katbailey on May 12, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 662

Statistics

JQuery In Drupal — Presentation Transcript