0

I'd like to attach a javascript library to every page call. I created a directory for my module called flot_d8 I created an info file, lot_d8.info.yml. My understanding is, the libraries section should insert the javascript on every page load:

name: FLOT-D8
type: module
description: 'This module provides a wrapper to the javascript FLOT library.'
package: Misc
version: 8.x-1.0
core: 8.x
hidden: false
libraries:
  - flot_d8/flot

The library file which describes the flot asset is flot_d8.libraries.yml. I placed the flot library in drupal/modules/flot_db/flot:

flot:
  version: 1.x
  js:
    flot/jquery.flot.js: {}
  dependencies:
    - core/jquery

I enabled my module and fail to see the inclusion of jquery or foot in the header. My next attempt was to make a flot_d8.module file with a call to hook_page_attachment_alter:

<?php
function flot_d8_page_attachments_alter(array &$page) {
  // Attach the flot asset on every page.
  $page['#attached']['library'][] = 'flot_d8/flot';
}

Still no dice. Any advice? I'm wanting to begin playing around with getting the flot library working in D8. I'll eventually move the javascript attachment to occur during themeing, but I don't want to attempt that until I can even get the simplest case working.

As background. I've installed the PHP module so I can enter PHP directly into a page. If I insert the scripts and add javascript directly in the page. it works fine. This tells me the files are in the webspace and readable by the outside world:

<script src="http://test.mysite.com/core/assets/vendor/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://test.mysite.com/modules/flot_d8/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="http://test.mysite.com/modules/flot_d8/flot/jquery.flot.pie.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
  $(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
      d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

    $.plot($("#placeholder"), [ d1, d2, d3 ]);
  });
});//]]> 

</script>
<div id="placeholder" style="width:600px;height:300px;"></div>

EDIT: I surrounded the jQuery, and still no go. I tried simplifying the problem to just try to force the inclusion of jQuery on every page load and that does not work either. I changed the module file to be

function flot_d8_page_attachments(array &$page) {
  // Attach the flot asset on every page.
  $page['#attached']['library'][] = 'core/jquery';
}

and changed the basic page to be

<?php
$jquery_already_included = TRUE;
if (!$jquery_already_included) {
  echo '<script src="http://test.mysite.com/core/assets/vendor/jquery/jquery.js"></script>';
}
?>
<script>
(function ($) {
  function myFunction() {
    $("#h01").html("Hello jQuery")
  }
  $(document).ready(myFunction);
})(jQuery)
</script>
<h1 id="h01"></h1>?>

and even that does not work.

  • The libraries in info files work only for themes, not modules. To load the library in every page request I suggest using the hook_page_attachments since hook_page_attachments_alter is intendent for alteration of already attached libraries, not for adding new ones. also don't forget to clear cache. – user21641 Dec 12 '15 at 13:31
  • That's good to know. I didn't notice that in the help file I was reading. I changed the hook to hook_page_attachments and removed the libraries section from the info file, cleared the cache, and it still does not work – Kevin Nowaczyk Dec 12 '15 at 16:15
  • @KevinNowaczyk, I have a question check if jQuery works for authenticate user or only for login users? I ran into a similar problem before in the past. Also, do you really want to add jQuery ever single page ? You should only load when is need it, you seem to be developing like in D7 we load everything at the same time. In D8 is recommend to load it only when is need it that is why we introduce the "libraries" concept. – darol100 Dec 12 '15 at 16:35
  • @darol100 I'm doing the "start simple" approach to build a library wrapper. I figure I would try to do the simplest case first, then build up. I originally embedded everything in a raw php block to make sure the files worked, then I'm trying to incrementally move everything into module files. Lastly I'll develop classes to abstract the library. – Kevin Nowaczyk Dec 12 '15 at 16:41
  • @KevinNowaczyk, I'm glad to hear that =). I do not want people to keep developing like D7 in D8. Otherwise is going be bad. – darol100 Dec 12 '15 at 16:48
0

It looks like the javascript file WERE included before, but they were in the footer. When jQuery code is placed in a basic page, that appears to not work. However, forcing the js files in the header allows everything to run.

I changed my module file to be:

<?php
function flot_d8_page_attachments(array &$page) {

 $page['#attached']['html_head'][] = [
    // The data.
    [
      // The HTML tag to add, in this case a <script> tag.
      '#tag' => 'script',
      '#attributes' => array(
        'language' => "javascript",
        'type' => "text/javascript",
        'src' => "http://test.mysite.com/core/assets/vendor/jquery/jquery.js",
      ),
      '#value' => '',
    ],
    // A key, to make it possible to recognize this HTML <HEAD> element when altering.
    'jquery-define'
  ];

  // Attach the flot asset on every page.
  $page['#attached']['html_head'][] = [
    // The data.
    [
      // The HTML tag to add, in this case a <script> tag.
      '#tag' => 'script',
      '#attributes' => array(
        'language' => "javascript",
        'type' => "text/javascript",
        'src' => "http://test.mysite.com/modules/flot_d8/flot/jquery.flot.js",
      ),
      '#value' => '',
    ],
    // A key, to make it possible to recognize this HTML <HEAD> element when altering.
    'flot-define'
  ];

}

And my Basic-Page javascript now works.

  • So, the question actually was how to add the JS to the header? – leymannx Jun 27 '18 at 22:33
  • I guess...the question is 3 years old. – Kevin Nowaczyk Jun 28 '18 at 1:17
  • Sometimes questions get bumped to the homepage, to review them. This question got bumped to the homepage. The answer ist good, but I wonder if the question wasn't originally a different one and may fit better if it gets edited. – leymannx Jun 28 '18 at 6:58

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.