How to get drupal module path in javascript?

Question

I'm trying to use this: var path = Drupal.settings.mymodule.basePath;but I'm getting this error: Uncaught TypeError: Cannot read property 'basePath' of undefined.

Answer 1

First of all you need to call drupal_add_js() with a 'settings' parameter. This will inform your Drupal.settings javascript namespace about the settings/variables you need in this file via drupal. Try the following :

Lets suppose you want to call a specific *.js file on a nodes' view page, call it as :

drupal_add_js(array('myModule' => array('basepath' => '<your-drupal-base-path>')), 'setting');

This basepath is global and you can get it in any *.js file called at this point. Next, you can use this basepath in your *.js file as :

var path = Drupal.settings.myModule.basepath;

Answer 2

1. It starts with adding the following line to your modules .info file (rename MYMODULE to your module name or the name you want to give to your javascript file)

   scripts[] = MYMODULE.js

2. The next step is to create the MYMODULE.js file. The general template of the javascript file looks like:

     (function ($) {
        Drupal.behaviors.MYMODULE = {
        attach: function (context, settings) {
           // Your javascript code here
       }
     };
   }(jQuery));
   

3. You can pass variables from your PHP to your Javascript file by adding the following code somewhere in your module.

   drupal_add_js(array('MYMODULE' => array('tax_rate' => '0.06')), 'setting');

You can now access this variable in your JavaScript:

(function ($) {
  Drupal.behaviors.MYMODULE = {
    attach: function (context, settings) {
      // You can access the variable by using Drupal.settings.MYMODULE.tax_rate
      alert(Drupal.settings.MYMODULE.tax_rate);

    }
  };
}(jQuery));

Answer 3

At First you need to have a module or create a module

See detailed steps below on adding this condition

• Create a folder called 'custom' in sites/all/modules
• Create a folder called 'mycustomjs' in above custom folder
• Create a file called 'mycustomjs.info' inside above folder with

below code

name = My Custom JS Alters
description = A custom module to interact with JS
core = 7.x
package = Custom

Create a file called mycustomjs.module inside 'mycustomjs' folder with below code

<?php



 function mycustomjs_init(){

      global $base_path;
      global $base_url;

     $my_base_path = $GLOBALS['base_url'] . $GLOBALS['base_path'];
    // or $my_base_path = $base_url . $base_path;


       $my_settings = array(
         'basePath' => $base_path,
         'animationEffect' => variable_get('effect', 'none')
       );

      drupal_add_js(array('mycustomjs' => $my_settings), 'setting');


    }
?>

For JS side

var basePath = Drupal.settings.mycustomjs.basePath;
var effect = Drupal.settings.mycustomjs.animationEffect;

For more information See below

Creating Drupal 7.x modules

Drupal 7 global javascript variables

The Drupal JavaScript API

Drupal Base Url

get-complete-base-url-drupal-site

Answer 4

To get the path on js file like following:

var path = Drupal.settings.myModule.basepath;

First need to initiate add_drupal_js() with 'settings' parameter like :

drupal_add_js(array('myModule' => array('basepath' => '<the-path>')), 'setting'); 

Example:

drupal_add_js( array( 
   'myModule' => array(
             'basepath' => drupal_get_path('module', 'myModule')
              )
    ), 'setting' 
);

Then on any *.js file you can access this variable as following:

 (function ($) {
      Drupal.behaviors.myModule= {
        attach: function (context, settings) {
          // You can access the variable by using var 
          path = Drupal.settings.myModule.basepath;
          console.log(Drupal.settings.myModule.basepath);

        }
      };
    }(jQuery));