This presentation is a top level overview of how to work with JavaScript in drupal. This includes drupal specific techniques, integration between the front end and back end, and JS aggregation and special features.

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