Javascript

Managing JavaScript in Drupal 7

The Drupal Javascript API

Adding to all pages regardless of theme

Using this method will place the Javascript on ALL pages in the site.

Inside the *.info file enter the line:

scripts[] = foo.js

Alternatively, you could place it in the module’s yourModule.module file.

function COA_preprocess_page(&$varibles) { // or perhaps COA_preprocess_html(&$variables) {...
	$node = menu_get_object(); //This may not be needed; the node type might be located in $variables['node']['type']...
	if (isset($node->type)) {
		if($node->type == "book") {
			drupal_add_library('system', 'ui.dialog', true); //args=(module, library, everyPage) Included with EVERY page on the site when added in this manner.
			drupal_add_css(drupal_get_path('module', 'COA') . '/coa-CSS.css');
			drupal_add_js(drupal_get_path('module', 'COA') . '/coaSetup.js');
		}
	}
}

Adding to a Form

Using this method will place the Javascript only on the page that creates the form.

$form['#attached'] = array(
  'js' => array(drupal_get_path('module', 'yodesa') . '/yodesa.js'),
);

Adding to all pages utilizing a specific theme

Option 1: Place it in the theme’s .info file.

Option 2: Place this function in the theme’s template.php file.

function yourTheme_preprocess_page(&$variables) {
	//Include this on all pages.
	drupal_add_js(drupal_get_path('theme', 'yourTheme') . 'js/yourJavascript.js');
}

/* OR */

function yourTheme_preprocess_html(&$variables) {
	...
}

Adding to all Nodes or Content Types

You will need to add the following code to an appropriate hook for your situation. Perhaps the easiest is to watch the generation of every single page, and if the current page is the one you want the code added to, then you can call drupal_add_js(). For example, in your theme’s template.php file (assume the theme name is “ribbon”) you could write:

function yourTheme_preprocess_node(&$variables) {
	//Include this on all nodes.
	drupal_add_js(drupal_get_path('theme', 'yourTheme') . 'js/yourJavascript.js');

	//Include this on all "Basic Page" content types
	if ($variables['node']['type'] === 'page') {
		drupal_add_js(drupal_get_path('theme', 'yourTheme') . '/js/page.js');
	}
}

Include Javascript only on Home Page

function yourTheme_preprocess_node(&$variables) {
	if (drupal_is_front_page()) {
		drupal_add_js(drupal_get_path('theme', 'yourTheme') .'/js/ribbon.js', array('type'=>'file', 'scope'=>'footer'));
		drupal_add_css(drupal_get_path('theme', 'yourTheme') .'/front.css', array('type'=>'file', 'group'=>CSS_THEME));
	}
	//Include this on all nodes.
	drupal_add_js('sites/all/themes/ribbon/js/ExpandAnswerCase.js'); // To show/hide case study answers
}

Include Javacript on a Specific Node

function yourTheme_preprocess_node(&$variables) {
	if ($variables['nid'] == 'INSERT_NODE_ID') {
		drupal_add_js(drupal_get_path('theme', 'yourTheme') . 'yourScript.js');
	}
}

Include Javacript on a Specific View

function yourTheme_preprocess_views_view(&$variables){
	if ($variables['name'] == 'INSERT_VIEW_MACHINE_NAME') {
		drupal_add_js(drupal_get_path('theme', 'yourTheme') . 'yourScript.js');
	}
}

Passing PHP data (server side) to Javascript (client side)

Let’s say a variable is set on the server that some client side code needs access to. Traditionally, you would inject a variable into a Javascript <script> tag on the page. Drupal does the same thing in a more automated way. View the links above for more information or page 293 of Drupal 7 Module Development.

jQuery

Core Drupal makes extensive use of jQuery and as custom module builders we also have access to it. There is a module that allows you to use a more recent version of jQuery than what ships with Drupal, however I would NOT recommend using it. There were a few problems with user Contributed modules (such as Views and CKEditor) that relied on the older version of jQuery.

Drupal, in their infinite misguided assumptions, removed the $ variable that maps to jQuery, which means you either need to fully qualify jQuery or reassign the $ symbol. See page 288 of Drupal 7 Module Development for examples.

jQuery UI Widgets

Noticably absent is the Tooltip widget. Try just using the title attribute or use the Modal widget instead, which is more touch friendly.

Cascading Style Sheets (CSS)

Adding to a Module

$form['#attached'] = array(
  'js' => array(drupal_get_path('module', 'yodesa') . '/yodesa.js'),
  'css' => array(drupal_get_path('module', 'yodesa') . '/yodesa.css'),
);

An alternate way to include external CSS is through the use of drupal_add_css(). This function will get added in the same manner as described above in Javascript section.