17 July 2011

JavaScript libraries, basics and examples for Drupal 7. JavaScript is provided using the Library API.

JavaScript libraries and plugins

Following plugins are provided by Drupal 7:
  • jQuery 1.4.4
  • jQuery UI 1.8.6
  • jQuery Cookie - read, write and delete cookies
  • jQuery Form - AJAX forms
  • jQuery Once - filters out all elements that had the same filter applied to them previously
  • jQuery BBQ - back button and query library
  • Farbtastic - color wheel

Using jQuery

Drupal uses no conflict mode. This means that the $ variable is relinquished so Drupal can work with other JavaScript libraries that may use the $ variable. More detail is available at https://api.jquery.com/jQuery.noConflict.


Wrap your code in an anonymous function and choose an alias, this way you can use $ as jQuery variable:
Source code viewer
  1. (function($) {
  2.   $().ready(function() {
  3.     //...
  4.   });
  5. })(jQuery);
Programming Language: jQuery

Using jQuerys ready in your module. This is triggered when all assets such as images have been completely received.
Source code viewer
  1. drupal_add_js('(function($){$().ready(function(){
  2.   //...
  3. });})(jQuery);', 'inline');
Programming Language: PHP

Adding external JavaScript file

Example that shows you how to add external JavaScript libraries in Drupal. 
Source code viewer
  1. drupal_add_js('http://ajax.googleapis.com/ajax/libs/webfont/1.4.8/webfont.js', 'external');
Programming Language: PHP

Pass variables from PHP to JavaScript in Drupal

Example that shows you how to pass variables from PHP to JavaScript in Drupal. Passing variables from PHP. You can pass strings, arrays and objects.
Source code viewer
  1. drupal_add_js(array('my_variable' => 'Content of variable'), 'setting');
Programming Language: PHP
Use of variables in JavaScript.
Source code viewer
  1. console.log(Drupal.settings.my_variable);
Programming Language: Javascript

Add script files by specifying it in the .info file

Source code viewer
  1. scripts[] = javascript.js
Programming Language: YAML

JS in Form API

Source code viewer
  1. $form['#attached']['js'][] = $module_path . '/js/chapter_edit_position.js';
  2. $form['#attached']['js'][] = array(
  3.   'data' => array(
  4.     'chapter_edit_position' => $form['nid']['#value'],
  5.     ),
  6.   'type' => 'setting',
  7. );
Programming Language: PHP

Scripts from Drupal 7 core

Source code viewer
  1. drupal_add_library('system', 'drupal.ajax');
  2. drupal_add_library('system', 'drupal.batch');
  3. drupal_add_library('system', 'drupal.progress');
  4. drupal_add_library('system', 'drupal.form');
  5. drupal_add_library('system', 'drupal.states');
  6. drupal_add_library('system', 'drupal.collapse');
  7. drupal_add_library('system', 'drupal.textarea');
  8. drupal_add_library('system', 'drupal.autocomplete');
  9. drupal_add_library('system', 'drupal.vertical-tabs');
  10.  
  11. drupal_add_library('system', 'ui');
  12. drupal_add_library('system', 'ui.datepicker');
  13. drupal_add_library('system', 'ui.dialog');
  14. drupal_add_library('system', 'ui.draggable');
  15. drupal_add_library('system', 'ui.droppable');
  16. drupal_add_library('system', 'ui.mouse');
  17. drupal_add_library('system', 'ui.position');
  18. drupal_add_library('system', 'ui.progressbar');
  19. drupal_add_library('system', 'ui.resizable');
  20. drupal_add_library('system', 'ui.selectable');
  21. drupal_add_library('system', 'ui.accordion');
  22. drupal_add_library('system', 'ui.slider');
  23. drupal_add_library('system', 'ui.sortable');
  24. drupal_add_library('system', 'ui.autocomplete');
  25. drupal_add_library('system', 'ui.tabs');
  26. drupal_add_library('system', 'ui.button');
  27. drupal_add_library('system', 'ui.widget');
  28.  
  29. drupal_add_library('system', 'jquery.cookie');
  30. drupal_add_library('system', 'jquery.bbq');
  31. drupal_add_library('system', 'jquery.form');
  32. drupal_add_library('system', 'jquery.once');
Programming Language: PHP