Writing jQuery in Drupal 7 and using Drupal behaviors

There are three ways to add jQuery in Drupal - two ways are to include a .js file on some page, third way is writing JavaScript code inline.

Before we start writing jQuery, it's good to know that Drupal 7 includes jQuery 1.4.4 and jQuery UI 1.8.7. Drupal 6.0 to 6.2 included jQuery 1.2.3 while Drupal 6.3 includes an update to jQuery 1.2.6.

There are three ways to add jQuery to Drupal, two ways are to include a .js file on some page, and the third way is writing JavaScript code inline. When JavaScript is added to the page through Drupal, jQuery is automatically added to that page.

Add jQuery in Drupal 7 (drupal_add_js)

First way to add JavaScript code in Drupal 7 is to include a .js file using Drupal function drupal_add_js. In this example we are going to include websolutions.js file directly in our page:

<?php
drupal_add_js('websolutions.js');
?>

Another way to add JavaScript code in Drupal 7 is to include a .js file in theme's .info file using script tags. In this example we are going to include websolutions1.js, websolutions2.js and websolutions3.js files.

scripts[] = websolutions1.js
scripts[] = websolutions2.js
scripts[] = websolutions3.js

Now when the file is included, it will automatically be loaded on every page in the theme. Don't forget to clear the cache by clicking "Clear all caches" button located under Performance.

jQuery inline in Drupal 7

Adding parameter 'inline' allows us to write and execute a piece of JavaScript code directly on our theme's page, but we have to notice to use jQuery() instead of $() like in this example:

<?php
drupal_add_js('jQuery(document).ready(function () { alert("Welcome to websolutions.hr"); });', 'inline');
?>

Writing additional parameters in drupal_add_js function

• 'external' parameter allows us to include external JavaScript file that is not hosted on local server
• 'setting' parameter adds settings to Drupal global storage. All settings are going to be accessible via Drupal.settings behavior (find out more about Drupal behaviors below)

drupal_add_js options:

• type ('file', 'inline', 'external', 'setting')
• scope ('footer', ' header') - location where we want to place our script, in this case it can be footer or header
• group - a number identifying the group in which to add the JavaScript. Available constants are: JS_LIBRARY, JS_DEFAULT and JS_THEME
• every_page - this should be set to TRUE if the JavaScript is present on every page of the website for users for whom it is present at all
• weight - a number defining the order in which the JavaScript is added to the page relative to other JavaScript with the same 'scope', 'group', and 'every_page' value
• defer - if set to TRUE, the defer attribute is set within the <script> tag. Defaults to FALSE.
• cache - if set to FALSE, the JavaScript file is loaded anew on every page call; in other words, it is not cached.
• preprocess - if TRUE and JavaScript aggregation is enabled, the script file will be aggregated

drupal_add_js examples with parameters:

<?php
drupal_add_js('jQuery(document).ready(function () { alert("Welcome to websolutions.hr!"); });',
array('type' => 'inline', 'scope' => 'footer', 'weight' => 5) );
?>

Loading .js file from another server:

<?php
 drupal_add_js('http://example.com/websolutions.js', 'external');
?>

What are Drupal behaviors and how to use them

First thing to get clear - Drupal behaviors are not replacements for document.ready(), because Drupal behaviors can be run multiple times on any element on the page. This is an example of how to use them:

<?php
  drupal_add_js(array('moduleName' => array('key' => 'key_value')), 'setting');
?>

We defined module key value and now we can easily call it from JavaScript:

if (Drupal.settings.moduleName.key == key_value){
    alert('Welcome to websolutions.hr!');
  }

Why use Drupal.behaviors

• Functionality to override JavaScript
• Easy to reattach and attach behavior to specific context
• HTML can be loaded via AHAH