By jamescook on

According to the drupal_add_js doc for D7,

scope: The location in which you want to place the script. Possible values are 'header' or 'footer'. If your theme implements different regions, you can also use these. Defaults to 'header'.

I'm trying to get some js output at a custom location - so I added a new region.
The *.info file contains:

regions[jqmpagefooter] = JqmPageFooter

The page.tpl.php (custom) contains:

   <div id="jqmpagefooter" class="region region-jqmpagefooter">
      <div class="section">
         <?php print render($page['jqmpagefooter']); ?>
</div>

And the drupal_add_js statement is:

drupal_add_js(drupal_get_path('module', 'flexslider') . '/assets/js/flexslider.load.js', array('type' => 'file', 'scope' => 'jqmpagefooter'));

The problem is the rendered div is always "empty".
I've flushed ALL caches a number of times.

What is rendered is just:

<div id="jqmpagefooter" class="region region-jqmpagefooter">
<div class="section"> </div>
</div>

To test I also created a simple Block (just using the std admin/structure/block), and tried to get it to appear in JqmPageFooter (at least it is a known region). This DOES appear. So the render statement is working.

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

You are confusing two things, regions and js scope.

I am guessing what you want is a module that implements a block, when the block is view is would use drupal_add_js() to add flexslider.load.js without the scope. It would return a block with non-empty content (something other than the js file).

jamescook’s picture

jamescook commented

What I want to do is to add flexslider.load.js at the bottom of a jquery mobile page and not at the "standard" page bottom so any suggestions on how to do this pragmatically are more than welcome.

I was trying the drupal_add_js approach because it appeared to offer what I was looking for.
It seems with drupal_add_js a (js) scope of "header" maps to the region "page_top" and not "header". And a scope of "footer" to "page_bottom" and not "footer". (That's confusing for a start.)

And then as I quoted above, in the doc for drupal_add_js there's:

scope: The location in which you want to place the script. Possible values are 'header' or 'footer'. If your theme implements different regions, you can also use these. Defaults to 'header'.

"you can also use these" seems to suggest you can implement a region and have drupal_add_js insert js at that location.

What's missing is a statement of how this can in fact be done.
It seems to me that, just as "header" maps to the region "page_top", a mapping from a js scope of "jqmpagefooter" map to the region "jqmpagefooter" would be needed.

Jaypan’s picture

Jaypan commented

The text on the drupal_add_js() page is definitely confusing - and potentially incorrect.

But that all said, the point of putting scripts in the header or footer is to improve page load times. Putting your scripts in the footer lets the whole page load before javascript files are loaded and kicked in. So some people prefer to have their scripts at the end of the page, rather than the start.

There isn't really any reason to put scripts into a particular reason, so I don't know why they would even add that functionality in the first place - if it even actually exists, it may be a mistake in the explanation page, since there doesn't seem to be a mechanism to do so.

Also, header doesn't map to 'page_top', it maps to the $scripts tag in the head.

jamescook’s picture

jamescook commented

Thank for your reply.

My intention was to include just the js needed inside (at the foot of) the jq-mobile page. Now I have placed the footer print statement inside the div so all footer js is printed there. Not a big problem.

Some things work immediately as a result - but flexslider, Openlayers etc. need additional things like the settings and, also, you may not have the css and js files depending on whether the "starting page" contained them. One approach maybe to print the $script inside the data-role="page" too. But then you have practically ALL the js, css and settings in the page and nothing in the head section - making for very heavy jq-mobile pages. Another approach is to scrape this code/data from the HTML too.

All in all D7 and the modules and the libraries themselves (e.g. Openlayers) weren't originally designed for this kind of use and are strongly "HTML page" based.

I imagine that may change.

Hydra’s picture

Hydra commented

It is possible to do:

drupal_get_js('custom_scope')

And pass this to your template via preprocess_html.

andykisaragi’s picture

andykisaragi commented

Thx this was what I needed (well it turned out not to be, but was what I needed to achieve what I thought I wanted :P)

in case anyone finds it useful:

I'm loading content via ajax from a normal page load, and stripping out the contents of a div by id. But I needed the js from that page to be loaded in via ajax as well, so I wanted it to render within this div, not in the header or footer.

I did this:

drupal_add_js(drupal_get_path('module','mymodule') . '/mymodule.js',array('type' => 'file','scope' => 'content'));

then in mytheme_preprocess_page i did this

$js = drupal_get_js('content');
$page['content']['js'] = array('#markup' => $js);

This worked as intended.

However you can't add js settings to different scopes in this way, so this turned out to be a non-starter for me. I just changed the way I was loading the ajax content in the end.