An introduction to jQuery aimed at Drupal themers and developers. Briefly covers using ajax in Drupal.

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

2. 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

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

4. 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

5. 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!
});

6. 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’)

7. 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()

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

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

10. 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

11. 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)

12. Ajaxifying Drupal with jQuery
12

13. 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
));
}

14. 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;
});

15. 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

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

17. 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