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
You can disable cache on…
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'
Cache?
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.
I suggest to use AJAX,…
I suggest to use AJAX, something like ReplaceCommand.
Thanks for the suggestion. I…
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
Use jQuery's $.ajax() 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).
Thank You arpeggio
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
Glad you've found answer…
Glad you've found answer. Thank you too.
Cache tags?
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!