drupal_add_js in html template file

Question

I am using a zen subtheme and I am trying to add some javascript using the drupal_add_js on a certain node. When I use the drupal_add_js from within the html--node--XX.tpl.php file, it does not work.

But when I use it in the page--node--XX.tpl.php it does. I don't understand what causes the difference in the behavior. I thought that this would be the same. These are the lines I am adding in both cases:

drupal_add_css("sites/all/libraries/shadowbox/shadowbox.css", $type = 'file', $media = 'all', $preprocess = FALSE);
drupal_add_js("sites/all/libraries/shadowbox/shadowbox.js", array('type' => 'file', 'scope' => 'header', 'weight' => 5));
drupal_add_js("Shadowbox.init({skipSetup: true});", array('type' => 'inline', 'scope' => 'header', 'weight' => 6));

Can anyone illuminate me here?

Answer 1

Using drupal_add_js in a variant of the html template will never work, because the styles are printed in the html template. At the time you call drupal_add_js the variable containing the styles have already been created and you are too late to alter it with drupal_add_js.

The reason it works in page templates is that it is parsed before the html template so the variable containing the styles that is printed in the html template has not yet been generated.

Answer 2

You can try to insert the JS files by the preprocess function in your theme's template.php file:

Here goes an example:

function MYTHEME_preprocess_page(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'MYTHEME') .'/mytheme.js', 'file');
}

You can use an if() to validate the current path in the $variables in order to prevent the script to be loaded on every page.

To debug the $variables values you can install the devel module an use the dpm() function.

For example:

function MYTHEME_preprocess_page(&$variables) {
  dpm($variables);
}

Answer 3

Structure is
html.tpl.php
->page.tpl.php
-->node.tpl.php

So it is like html--page--node(--XX).tpl.php

Simply use node--XX.tpl.php but make sure there is a html.tpl.php, page.tpl.php and node.tpl.php file in your subthemes directory.

Answer 4

If you are looking to add javascript to individual nodes the best option is Code Per Node