Passing data from PHP to javascript variable available to all pages in Drupal 8

Most of us pass data from PHP to javascript variable available to all pages in Drupal 7 is by:

  
/**
 * Implements hook_init()
 */
function mymodule_init() {
  $computed_data = mymodule_get_data();
  drupal_add_js(array('mymodule_computed_data' => $computed_data), 'setting');
}
  

We can access this data in javascript by:

  
(function ($) {
  Drupal.behaviors.mymoduleAccessData = {
    attach: function (context, settings) {
      var data = settings.mymodule_computed_data;
    }
  };  
})(jQuery);
  

Now in Drupal 8, this task is possible by:

  
/**
 * Implements hook_page_attachments().
 */
function mymodule_page_attachments(array &$page) {
  $computedData = \Drupal\mymodule\MyData::getData();
  $page['#attached']['html_head'][] = [
    [
      '#tag'   => 'script',
      '#value' => "var mymoduleComputedData = $computedData",
    ],
    'mymodule_computed_data_javascript_access',
  ];
}
  

We can access this data in javascript by:

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

Or can also be done by:

  
/**
 * Implements hook_page_attachments().
 */
function mymodule_page_attachments(array &$page) {
  $computedData = \Drupal\mymodule\MyData::getData();
  $page['#attached']['drupalSettings']['mymoduleComputedData'] = $computedData;
}
  

We can access this data in javascript by:

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

Comments

Hi,
Thanks for the article. I'm using drupal8 and tried sending the php variable to javascript using the below from the above:
"$page['#attached']['drupalSettings']['mymoduleComputedData'] = $computedData;"

so the problem now is, every time the event is fired, the js variable is only set to the value assigned for the first time to the $computedData

I have known that this has something to do with the cache tags but exactly not sure how to configure it in this case so that the js variable changes dynamically?

Thanks!

You can disable cache on your custom page from route declaration by having no_cache set to TRUE in option at your MYCUSTOMMODULE.routing.yml file.

  
mycustommodule.mycustomroute:
  path: '/mycustommodule/custompage'
  defaults:
    _controller: '\Drupal\mycustommodule\Controller\Pages::mycustompage'
    _title: 'My no cache custom page'
  requirements:
    _access: 'TRUE'
  options:
    no_cache: 'TRUE'
  

Thanks for the reply. I did exactly the same, and its still the same, the php variable value gets updated dynamically but the assigned value within the javascript differs and does not get updated until the user reloads the whole page and clicks on the button again to assign the php variable to the Javascript variable. I tried 'delete' in JS to unset the variable but still it does not work.

Thanks for the suggestion. I'm aactually using an ajax callback within which I'm assigning the dynamic array to the drupalSettings nad then within the DrupalBehaviors, I'm assigning this to JS var and using it to form a DataTable. Since Datatable seems to be a third party library I'm not sure if I could use the ReplaceCommand and for the table within the callback function

You're welcome. The method mentioned in this article about the drupalSettings will not going to work in your use case, the drupalSettings will be updated upon page reload. You will need to use Drupal AJAX API or if it is too much work to force or seems not possible to use Drupal AJAX API in your existing codes, the practical solution is to use the non-Drupal way (use jQuery's $.ajax() function directly in your custom javascript application).

Please see the below link:
The suggestions here helped me:
https://drupal.stackexchange.com/questions/264324/how-to-make-sure-that-drupalsettings-value-gets-updated-on-the-javascript-end/264341#264341

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.