How to add JS to Drupal 7

Question

I want to add the Forrst Sap feature to a Drupal 7 website.

Firstly, this involves adding the jquery.sap.js script to the site which I can do via my themes .info file. I understand I must replace that jQuery is now namespaced to avoid conflicts with other Javascript libraries such as Prototype. All your code that expects to use jQuery as $ should be wrapped in an outer context like so.

(function ($) {
  // All your code here
}(jQuery));

But I'm unsure as to how to specify the Drupal behaviours for this code?

Secondly, I must add the inline code:

$('#item').sap({
    distanceFromTheTop: 0
});

I believe I can do this with drupal_add_js but again I'm not sure how to go about this through the template.php file?

Thanks for your help!

Conjuration

Answer 1

Here is a little boilerplate code for adding a javascript file to Drupal.

(function ($) {
  Drupal.behaviors.[myName] =  {
    attach: function(context, settings) {

      //Begin my code
      var myVarOne,
          myVarTwo;

      $('#item').sap({
        distanceFromTheTop: 0
      });
     //I'm done with my code

    }
  };
})(jQuery);

drupal_add_js() is a great function to use in code to add js files because they will be aggregated contextually so some pages can have huge js scripts but they won't be loaded in the cached aggregated js file on other page loads.

If you need the script on everypage or if it's small then add it through the [template_name].info file by using scripts[] = myscript.js or if your template folder has a subfolder for scripts called js then use scripts[] = js/myscript.js

p.s. Have a look at drupal.stackexchange.com

Selves

In Drupal 7, normally you don't need to use drupal_add_{js,css}() anymore. Use #attached instead (works with forms and page render arrays). – Nucleate

+1 for the answer and the comment with mentioning #attached, but I'm still missing a good documentation for the usage of #attached! But here is a great tutorial for "Managing JavaScript in Drupal 7" from Drupal.org. – Germin

Answer 2

I used the following line to successfully add javascript code to my drupal site:

drupal_add_js(drupal_get_path('module', 'my_module') .'/js/mycode.js', array('type' => 'file', 'scope' => 'footer'));

And the following line to pass a simple variable data to the above included /js/mycode.js:

drupal_add_js(array('my_module' => array('key' => 'value', ''))), 'setting');

The above variable is accessible in mycode.js via the following:

Drupal.settings.my_module.key;

PS: while you are attempting to include the .js file via template.php, I successfully use the above code in a custom module.

I'm not sure if my exact solution would work with your strategy.

Horizon

Answer 3

We can add JS in drupal by following method

1.)By drupal_add_js() function

drupal_add_js() is drupal api function to include js.

Example:

drupal_add_js('misc/collapse.js');

// add JS file

drupal_add_js('misc/collapse.js', 'file');

// For including inline javascript

drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline');

//For including inline javascript and includ and includ it in footer

drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', array(
  'type' => 'inline',
  'scope' => 'footer',
  'weight' => 5,
));

//For including External JS

drupal_add_js('http://example.com/example.js', 'external');

//For passing php value to JS

drupal_add_js(array(
  'myModule' => array(
    'key' => 'value',
  ),
), 'setting');

Example:

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

for more infomation visit https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7.x

2.)Adding by Form API

we can used '#attached' property of form api for including js

Example:

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

3.)Adding JS in info file

We can including javascript in script file

Example:

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

scripts[] = mytheme.js

4.)By preprocess function

if we want to conditionaly include JS we can include it in preprocess 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?
  }
}

Comrade