JQuery In Drupal
-
Upload
katbailey -
Category
Technology
-
view
52.823 -
download
0
description
Transcript of 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="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)
11
Ajaxifying Drupal with jQuery
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
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);
Resources
• JavaScript Startup Guideon api.drupal.org
• drupaldojo.com/lesson/ahah• http://jquery.com• Firebug console• Books
– Learning jQuery– jQuery in Action