Score:0

Why does my JS file not get loaded?

nl flag

I am a beginner with Drupal. I want to include a JavaScript file using a custom module.

I created the .libraries.yml file, hello_world.libraries.yml.

hello_world_js:
  js:
    js/basic.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings

The module .info.yml file (hello_worl.info.yml) contains a reference to the library.

name: Hello World
type: module
description: Say Hello World
package: Custom
core: 8.x
libraries:
  - hello_world/hello_world_js

The JavaScript code in the basic.js file is the following one.

(function($,Drupal){
  Drupal.behaviors.addAccessionBehavior = {
    attach: function(context, settings){
      $(".query_button").click(function(){
        console.log("works");
      });
    }
  };
})(JQuery, Drupal);

When I click on a button using the .query_button CSS class, nothing happens and I don't know what the problem is.

leymannx avatar
ne flag
You need to attach the library. Right now you only declared it. https://www.drupal.org/docs/drupal-apis/javascript-api/add-javascript-to-your-theme-or-module#s-attaching-the-file
Francisco Javier Valero Moreno avatar
nl flag
when i declared in info.yml isn't it atached to entirely web?
leymannx avatar
ne flag
In a theme info file, yes. In a module info file, no. Modules have no `libraries:` key. You declared it in the *.libraries.yml and now you need to attach it. You can't attach libraries in module info files.
Francisco Javier Valero Moreno avatar
nl flag
i see, i have do this $build['#attached']['library'][] = 'hello_world/hello_world_js'; as the example but still not work
leymannx avatar
ne flag
Where exactly did you add this line of code? [`hello_world_page_attachments`](https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_page_attachments/8.3.x) in hello_world.module?
Francisco Javier Valero Moreno avatar
I added now to hello_world.module, but now i have another error with ajax (?ajax_form=1&_wrapper_format=drupal_ajax: ajax.$form.ajaxSubmit is not a function) and one button than i dont had before, so i will asume than now is loading but something is wrong, thanks :D i will try to find whats is the error now
fr flag
In general your code looks OK. A lot of times problems like this are because of either the name or the location of your files. You declared the JavaScript file as 'js/basic.js', which means it has to located in a subdirectory named 'js', so in the top-level module directory you should have 'hello_world.info.yml' and 'hello_world.module' and the 'js' directory, while in the 'js' directory you should have 'basic.js'
Francisco Javier Valero Moreno avatar
nl flag
yes, i have fixed, as the answer below, i wrote JQuery instead of jQuery and that was giving me the error
Score:0
de flag

If you look in a JavaScript console you can get more information. You probably have an error in your console that says JQuery is not defined. This is because you declared JQuery but the variable is jQuery. So this:

})(JQuery, Drupal);

Should be this:

})(jQuery, Drupal);

Also, when you want to test if your file has been attached, you should add a debugging command directly into behaviors.attach(), rather than a sub-function that requires a click (as you've done). So you can test if your script has been added like this:

Drupal.behaviors.addAccessionBehavior = {
  attach: function(context, settings){
    console.log("works");
    $(".query_button").click(function(){
      // Do stuff on click
    });
  }
};

This will log something on page load, which tells you that the script has loaded (and contains required variables).

Francisco Javier Valero Moreno avatar
nl flag
Yes, in fact that was the cause of the error iI was having, thanks you very much
Jaypan avatar
de flag
Then please mark my solution as the correct answer.
Score:0
ne flag

Module info files have no libraries key. That key is only for themes.

You need to attach the module library yourself. Read the docs; there are numerous ways to attach the library at the right place to be loaded at the right time, depending on where you need the JS to fire.

Finally fix this typo: JQuery with uppercase J is wrong. It needs to be jQuery with lowercase j.

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.