How do I pass variables to JavaScript?

Question

In your MODULENAME.module file:

$testVariable = 'himanshu';
drupal_add_js(array('MODULENAME' => array('testvar' => $testVariable)), array('type' => 'setting'));
drupal_add_js(drupal_get_path('module', 'MODULENAME') . '/MODULENAME.js');

In MODULENAME.js file:

(function($) {
  Drupal.behaviors.MODULENAME = {
    attach: function (context, settings) {
      alert(settings.MODULENAME.testvar);
    }
  };
})(jQuery);

this way you can pass your php variable in drupal javascript file and use the variable :)

How can I implement the above in Drupal 8?

Answer 1

Instead of drupal_add_js(array('MODULENAME' => array('testvar' => $testVariable)), array('type' => 'setting')); you use $build['#attached']['drupalSettings']['testvar'] = $testVariable;. Replace $build with the variable containing the form or the render array to which the settings are attached; in a form builder or hook_form_alter(), that would be $form.

The JavaScript code to attach to the page should then be defined as library, which is the only way to attach JavaScript and CSS to a page or a form.
It is explained in Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module, so I will not repeat it here. I will just make notice that the library needs to declare at least two dependencies:

• core/jquery, if the JavaScript code uses jQuery
• core/drupalSettings, since the JavaScript code uses Drupal settings

Answer 2

For Drupal 8 you can do.

 /**
 * Implements hook_page_attachments().
 */
function mymodule_page_attachments(array &$page) {
  $page['#attached']['drupalSettings']['myname'] = 'himanshu';
}

(function ($, Drupal, drupalSettings) {
  /**
   * @namespace
   */
  Drupal.behaviors.mymoduleAccessData = {
    attach: function (context) {
      var data = drupalSettings.myname;
    }
  };
})(jQuery, Drupal, drupalSettings);

Answer 3

Drupal 8 ^(update)

/**
 * Implements hook_page_attachments().
 */
function myModule_page_attachments(array &$attachments) {
  $attachments['#attached']['drupalSettings']['myModule'] = [
    'basePath' => base_path(),
  ];
}

This variable would then be referenced from JS side like:

console.log( drupalSettings.myModule.basePath );

Or:

(function ($) {
  Drupal.behaviors.myModuleAccessData = {
    attach: function (context) {
      var data = drupalSettings.myModule.basePath;
    }
  };
})(jQuery);

Old answer

Another way to do it (as mentiond in JS-standards) would be:

$element['#attached']['js'][] = array(
  'data' => array('myModule' => array('basePath' => base_path())), 
  'type' => 'setting',
);

This variable would then be referenced from JS side like:

console.log( Drupal.settings.myModule.basePath );