10

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?

0

3 Answers 3

21

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
4
  • 7
    Just to be precise drupal.org/theme-guide/8/assets#configurable-javascript Commented Mar 2, 2016 at 6:20
  • @kiamlaluno I have tried your solution above but it still gives undefined error , can u please look at the code I have added below the updated Answer text in the question Commented Mar 2, 2016 at 6:31
  • Ask a new question. You cannot change the meaning of a question once it gets an answer, since it would make the answer invalid. Commented Mar 2, 2016 at 6:35
  • @kiamlaluno I have added a new question related to this , please answer to it , thanks drupal.stackexchange.com/questions/193212/… Commented Mar 2, 2016 at 6:39
5

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);
4

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 );
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.