How do I add javascript to a node or block

Question

I've made a cost calculator script and want to use it on my Drupal 7 site.

I heard to use drupal_add_js, but I don't know in what context.

Answer 1

Use a function in the template.php file: yoursite.com/sites/all/themes/YOUR_THEME/template.php

Add JS file in a block:

function YOUR_THEME_preprocess_block(&$variables) {  
    drupal_add_js(drupal_get_path('theme', 'MYTHEME') .'/scripts/path');
} 

Add JS file to one page or node:

function YOUR_THEME_preprocess_page(&$variables) {
  if ($variables['nid'] == 'INSERT_NODE_ID') {
     drupal_add_js(drupal_get_path('theme', 'MYTHEME') .'/scripts/path');
  }
}

Add JS file to a content type:

function YOUR_THEME_preprocess_node(&$variables) {
  if ($variables['type'] == 'INSERT_CONTENT_TYPE') {
       drupal_add_js(drupal_get_path('theme', 'MYTHEME') . '/scripts/path');
  }
}

Add JS file to a view:

function YOUR_THEME_preprocess_views_view(&$variables){
  if ($variables['name'] == 'INSERT_VIEW_MACHINE_NAME') {
    // include javascript
    drupal_add_js(drupal_get_path('theme', 'MYTHEME') . '/scripts/path');
  }
}

As mentioned by @Pierpaolo Cira, you could always replace MY_THEME with MY_MOUDLE. To get the path to your module you would have to use drupal_get_path('module', 'my_module').

Note: MY_THEME and MY_MODULE needs to be lowered case if your module or theme name is lowercased. (E.g. MY_THEME would be replaced with zen if zen)

Source

Answer 2

You can add the js inside a module :

Create the module and put inside the mymodule.module

drupal_add_js(drupal_get_path('module', 'mymodule') . '/mymodule.js');

or in the theme:

in the .info file

name = My theme
description = Theme developed by me.
core = 7.x
engine = phptemplate

scripts[] = mytheme.js

or in a preprocess_page function

function mytheme_preprocess_page(&$vars, $hook) {
  if (true) {
    drupal_add_js(drupal_get_path('theme', 'mytheme') . '/mytheme.js');
    $vars['scripts'] = drupal_get_js(); // necessary in D7?
  }
}

Answer 3

A better approach would be to get the path from Drupal, and you have to put the code in the form function;

function mymodule_form($form, &$form_state) {

... some of your forms goes here

    $form['#attached']['js'][] = drupal_get_path('module', 'mymodule') . '/myscript.js';

  return $form;

Also add your javascript between the code below

(function($)  {
  function mymodule_function(context)  {

  // from here

  // paste your code in here

  // till here

  }

  Drupal.behaviors.custommodule = {
    attach: function(context)  {
      mymodule_function(context);
    }
  }
})(jQuery);

Answer 4

Use function in template.php

Add JS file in block:

function MYTHEME_preprocess_block(&$variables) {  
    drupal_add_js(drupal_get_path('theme', 'MYTHEME') .'/mytheme.js', 'file');
} 

Add JS file in page or node:

function MYTHEME_preprocess_page(&$variables) {  
     drupal_add_js(drupal_get_path('theme', 'MYTHEME') .'/mytheme.js', 'file');

}

Answer 5

if your script is saved as .js you can add it like that in html.tpl.php:

<?php drupal_add_js('location/of/my/script/my_script.js'); ?>

more info here

OR

<script src="location/of/my/script/my_script.js"></script> 

in your block or node body (make sure that you select format that does not filter JavaScript i.e. "PHP code")