1. Introduction to
jQuery in Drupal

2. Matt Farina
Developing for web since 1996
Coded In Over 10 Languages
Developer at Tree House Agency
Drupal and jQuery Developer
I Used To Build Military Tanks

3. A Little History
jQuery chosen for drupal core before
release of jQuery 1.0
jQuery 1.0.4 shipped with drupal 5
Drupal 5 used jQuery to spruce up
interface
jQuery 1.2.3 shipped with Drupal 6
Drupal 6 translations, themes, libraries
Currently jQuery 1.2.6 in Drupal 6
Drupal 7 to ship with latest version of
jQuery (current Dev is 1.3).

4. Add JavaScript In
Your Theme

5. Printing Scripts In Your Theme
In your page.tpl.php file(s) include:
<?php print $scripts; ?>

6. The Default script.js file
/sites/all/themes/mytheme
/sites/all/themes/mytheme/
mytheme.info
/sites/all/themes/mytheme/script.js
by default script.js will be included

7. Defining Scripts in .info
In you mytheme.info file:
scripts[] = ascript.js
scripts[] = jquery.plugin.js
scripts[] = bscript.js

8. Order of Files
Core (jQuery.js and drupal.js)
Module JS Files
Theme JS Files

9. Add Scripts
Programatically
drupal_add_js()

10. drupal_add_js()
Add JS Files
Add Inline JS
Add JS Settings/Variables

11. Add A File
drupal_add_js(‘/path/to/file.js’);

12. Add A File
drupal_add_js(drupal_get_path(‘module’,
‘mymodule’) . ‘/file.js’);

13. Add A File
drupal_add_js(drupal_get_path(‘module’,
‘mymodule’) . ‘/file.js’);
Drupal_add_css(drupal_get_path(‘module’
, ‘mymodule’) . ‘/file.css);

14. Add Inline JavaScript
drupal_add_js(“alert(‘Drupal Owns You’)”, ‘inline’);

15. Drupal Settings/Variables
The PHP:
$myvars = array(
‘mymodule’ => array(
‘myvar’ => ‘myvalue’,
),
);
drupal_add_js($myvars, ‘setting’);
The JavaScript:
alert(Drupal.settings.mymodule.myvar);

16. drupal_add_js()
drupal_add_js($data = NULL, $type = 'module',
$scope = 'header', $defer = FALSE, $cache =
TRUE, $preprocess = TRUE)
Data
Type
Scope
Defer
Cache
Preprocess

17. Preprocess
Administration >> Settings >> Performance

18. Drupal Libraries

19. Translating Stuff
PHP Translating:
t(‘my translatable text’);
JavaScript:
Drupal.t(‘My Translatable Text’);

20. Translating Stuff
var args {};
args[‘@count’] = 2;
Drupal.t(‘My Translatable @count’, args);

21. Translating Stuff
!variable: inserted as is
@variable: escape plain text to HTML
(Drupal.checkPlain)
%variable: escape text and theme as a
placeholder for user-submitted

22. Translating Stuff
var args {};
args[‘@count’] =
Drupal.formatPlural(Drupal.settings.mym
odule.count, ‘1 thing’, ‘@count things’);
Drupal.t(‘My Translatable @count’, args);

23. Theming
$(‘#myselector’).html(‘<h2>my title</h2>’);

24. Theming
$(‘#myselector’).
html(Drupal.theme(‘mythemefunction’,
‘mytitle’));

25. Theming
Default Theme Function:
Drupal.theme.prototype. mythemefunction
= function(text) {
return ‘<h2>’ + text + ‘</h2>’;
}
Overriding it:
Drupal.theme.mythemefunction =
function(text) {
return text;
}

26. Other Libraries
Drag and Drop Lists
AJAX
Resizable Text Areas
Autocomplete
A lot more.....

27. jQuery UI Module
http://drupal.org/project/jquery_ui

28. But, I Want A
Newer Version Of
jQuery!!!!!

29. jQuery Update
Module
http://drupal.org/project/jquery_update

30. Drupal Behavior
Drupal.behaviors.comment = function (context) {
var parts = new Array("name", "homepage", "mail");
var cookie = '';
for (i=0;i<3;i++) {
cookie = Drupal.comment.getCookie('comment_info_' +
parts[i]);
if (cookie != '') {
$("#comment-form input[name=" + parts[i] +
"]:not(.comment-processed)", context)
.val(cookie)
.addClass('comment-processed');
}
}
};

31. Q&A