0

I was trying to add some jQuery files to a theme (to do some simple css logics). I could add one jQuery file by defining as follows

In the custom theme folder I edited themes.libraries.yml and added the following

global-scripts:
  js:
    js/jqueryfile1.js: {}
  dependencies:
    - core/jquery

and then I wrote my jquery code within inside custom_theme_folder/js/jqueryfile1.js as

(function ($){
Drupal.behaviors.myModuleBehavior = {
    attach: function(context, settings) {
        $(document).ready(function(){

            //code goes here

            });
        });
    }
};
})(jQuery);

Everything was fine till now. But when I'm trying to add my next file(jqueryfile2.js) only the the latest (jqueryfile2.js) is taking in action. I can see the previous file is also called in the DOM while checking the source but the code is not executing. After adding my second jQuery my libraries.yml will look like

global-scripts:
  js:
    js/jqueryfile1.js: {}
    js/jqueryfile2.js: {}
  dependencies:
    - core/jquery

At this point jqueryfile2.js is only taking in action not the first file. And there will be both my jquery files within inside the js folder and is called to the document.

  • What jqueryfile2.js file consist of same DOM events or other? – vgoradiya Apr 10 '17 at 6:35
  • I'd guess you have used the Drupal.behaviors.myModuleBehavior.attach in both files. – user21641 Apr 10 '17 at 9:08
1

By default, multiple local files will be aggregated where possible. To disable this for a file, set its 'preprocess' flag to false.

mymodule:
  version: 1.x
  js:
    js/custom.js: {preprocess: false}
  dependencies:
    - core/jquery
    - core/jquery.ui
| improve this answer | |
0

You can try like the example

maintenance-page:
  version: VERSION
  js:
    js/mobile.install.js: {}

install-page:
  version: VERSION
  js:
    js/mobile.install.js: {}


drupal.nav-tabs:
  version: VERSION
  js:
    js/nav-tabs.js: {}

Taken from Seven theme seven.libraries.yml file.

| improve this answer | |
  • Thats a way to look but i was facing problem when adding two or more files in the global section. Or as per your example what we do if we want to add two files in the maintenance-page – Lalas Muathasim Apr 10 '17 at 6:48
0

Try this code to add js file to your custom module, mymodule.libraries.yml.

mymodule:
  version: 1.x
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/jquery.ui
| improve this answer | |

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.