JavaScript the Smart Way
Getting Started with jQuery
Drupal User Group presentation

Introduction to jQuery
• JavaScript / jQuery / AJAX - what’s the
difference?
– JavaScript is a scripting language that adds
interactivity to web pages
– jQuery is a JavaScript Framework
– AJAX is a particular type of functionality
• JavaScript is to jQuery as PHP is to
Drupal

Introduction to jQuery
• What can jQuery do for me?
“FLASH”Y STUFF
AJAX
TABS

Introduction to jQuery
• Advantages of jQuery over plain JavaScript
– Simplifies cross-browser issues
– You don’t have to write the same code over and
over again
• Advantages of jQuery over other JS
frameworks
– Very concise code
– Small file size
– completely open source
– Plugin architecture

jQuery Basics
• What do I need to get started?
– An understanding of CSS and the DOM
– Basic understanding of JS syntax (ideally!)
– jQuery itself
http://docs.jquery.com/Downloading_jQuery
• $(document).ready(function(){
//let’s get started!
});

Selectors
• CSS
$(‘a’), $(‘#container’),
$(‘div.ajaxContainer’),
$(‘li:first-child’)
• X-Path:
$(‘a[title]’), $(‘div[ul]’),
$(‘a[href^=“mailto:”]’)
• Custom:
$(‘li:eq(1)’),
$(‘tr:not([th]):odd’)

Some Useful Methods
• DOM Traversal
– .parent(), .siblings(), .next()
• Manipulation
– .html(), .empty(), .append(content)
• Events
– .ready(fn), .hover(fn1, fn2), .click(fn)
• Effects
– .slideToggle(), .show(), .hide()

Chaining
• $(‘#someElement’)
.parent().parent()
.find(‘div.green’)
.hide().end()
.siblings().find(‘div.blue’)
.show().end()
.parent().next()
.addClass(‘redBorder’);

Show/Hide Example
$(document).ready(function() {
$('a.showhide').click(function()
{
$(this).parent().parent()
.find('div.view-data-body')
.slideToggle();
return false;
});
}); see example

jQuery in Drupal
• drupal_add_js($data, $type)
– Add a JavaScript file, setting or inline code to the
page, for example:
• drupal_add_js(drupal_get_path(‘module’, ‘mymodule’)
.'/myjs.js');
• drupal_add_js(array(‘myjs’=>$mysettings), ‘setting’);
• Drupal_add_js(‘var myVar = “foo”;’, ‘inline’);
• Where do I put my code?
– themers: put your .js file in your theme directory and call
drupal_add_js(drupal_get_path(‘theme’, ‘mytheme’) .
‘myjs.js’) from a tpl file
– module developers: put your .js file in your module directory
and call drupal_add_js() before you output content

Ajaxifying Drupal with jQuery
• Basic essentials:
– jQuery’s .ajax() or .get() method
– drupal/path
– callback function
• drupal_to_js($var)
– Converts a PHP variable into its JavaScript
equivalent.
• Drupal.parseJSON(data)

Ajaxifying Drupal with jQuery
12

Ajaxifying Drupal with jQuery
‣ $items[] = array('path' => 'ajax/path',
'type' => MENU_CALLBACK,
'access' => TRUE,
'callback' => 'get_ajax_image');
‣ function get_ajax_image($nid) {
//some code to retrieve the image
print drupal_to_js(array(
‘title’ => $image_title,
‘path’ => $image_path
));
}

Ajaxifying Drupal with jQuery
‣ $(‘a.ajax-button’).click(function() {
$.get(this.href, function(data){
var result = Drupal.parseJSON(data);
$('div.title').html(result['title']);
$('div.image').html(result['path']);
});
return false;
});

Resources
• http://jquery.com
• Book: Learning jQuery
» PACKT Publishing
• Cheat sheets:
» http://colorcharge.com/jquery
• Other online resources
» http://www.learningjquery.com
» http://15daysofjquery.com
» http://visualjquery.com

Quick Tabs
Create blocks of tabbed views!
http://drupal.org/project/quicktabs

Key Takeaways
• jQuery is a framework for writing JavaScript
• It is extremely concise and therefore easy to
learn
• It has a robust and efficient CSS-based
selector mechanism for precise selection of
DOM elements
• It is modular, so non-standard features are
available as plugins
• AJAX is a piece of cake with jQuery
• Drupal ships with jQuery already built in