2

I'm having so much trouble with drupal 8 right now.

when in Drupal 7 I could do:

drupal_add_js("var a = 'b';");

and be done with it, for the life of my, I can't figure out how to attach data to a JS variable in Drupal 8

I had to write a custom THEME_preprocess_page function to add the JSON value to drupalSettings like this:

$variables['page']['content']['#attached']['drupalSettings']['customPricelist'] = $result;

but in reality the result get's escaped with quotation marks like:

"{"some":"stuff"}"

and is not usable..

Any ideas?

  • Possible duplicate of How to properly add inline Javascript? – rémy Jun 9 '16 at 19:37
  • I've seen that post and read all those articles, there's no information about how to manage what I'm trying. – Alari Truuts Jun 9 '16 at 19:38
  • I'm pretty sure that printing JavaScript code like that is bad practice. You should write a JavaScript script that uses variables from the drupalSettings object. – Eyal Jun 10 '16 at 6:10
  • @Eyal: That's exactly what I'm trying to do, and this was me trying to put some data into the drupalSettings variable, which was being escaped with quotation marks and rendered unusable :) – Alari Truuts Jun 10 '16 at 6:13
  • When you access the drupalSettings object in JavaScript it is un-escaped. – Eyal Jun 10 '16 at 6:17
1

something like:

$variables['page']['content']['#attached']['html_head'][] = [
    // The data.
    [
      '#type' => 'html_tag',
      // The HTML tag to add, in this case a  tag.
      '#tag' => 'script',
      // The value of the HTML tag, here we want to end up with alert("Hello world!");.
       '#value' => 'alert("Hello world!");',
       // set attributes like src to load a file
       '#attributes' => array('src' => ''),

    ],
    // A key, to make it possible to recognize this HTML  element when altering.
    'hello-world'
  ];
}
| improve this answer | |
  • It worked, Thank you! I've been going insane here pulling my hair out for hours.. How to come upon this sort of documentation or materials? – Alari Truuts Jun 9 '16 at 19:47
  • search for what you need. here inline javascript. in the answer I marked as duplicate, there the link to the change record, linking to where I copied this source from: drupal.org/developing/api/8/assets – rémy Jun 9 '16 at 19:52
0

The best practice of passing data to the JavaScript client is via the drupalSettings object.

$page['#attached']['drupalSettings']['somekey'] = [
  'anotherkey' => 'somevalue' 
]

In JavaScript it is accessible like this:

var someValue = drupalSettings.somekey.anotherkey;
| improve this answer | |
  • Just tried it, unfortunately still doesn't work, Rémy's solution is only thing so far. With your way I could store a string or integer but not an object and I assume neither an array as the "quotation marks" are still formed around the variable value. what I end up with is this: snag.gy/nksZfi.jpg however with Rémy's solution I get what I need which is an object: snag.gy/9vNETG.jpg – Alari Truuts Jun 10 '16 at 6:44
  • That is because you passed a php object to drupalSettings. You have two options: convert it to an associative array in the server side before passing it to drupalSettings or unserialize it on the JavaScript side with JSON decode. – Eyal Jun 10 '16 at 7:01
  • the object I'm passing is already json_encoded by drupal_json_output in a custom page modules 'delivery callback' and for some reason works if implemented with '#value' => 'var custom = '.$return.';'; in rémy's code. I do appreciate you trying to help figure out how to do it by the best practice guidelines, however for some reason my D8 install doesn't wan't me to.. – Alari Truuts Jun 10 '16 at 8:35
  • You should have mentioned that you are encoding it in the first place. When you encode it, it is being escaped. If you encode it then you must decode it. If you put your undecoded associative array inside the drupalSettings then it will be available to you in JavaScript, just like in the example above. – Eyal Jun 10 '16 at 8:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.