1

I have a bootstrap subtheme with scripts[] = script.js in the .info file. When I go to the site and view html source of the page I can see that drupal is including the file <script src="http://site/path/to/subtheme/script.js?ox2bif"></script> and if I click on that link and I see the expected contents of the file:

jQuery(document).ready(function(){
  jQuery('p').click(function(){alert("hello");});
});

The js works, the links to the actual file. What else is there?

If I paste jQuery('p').click(function(){alert("hello");}); into my browser's js console then, obviously, clicking any paragraph opens an alert popup window. But what am I missing that it's not working in the Drupal theme?


Additional info:

  • Drupal 7
  • Bootstrap base theme 7.x-3.15
  • Using Bootstrap CDN (not the SASS or LESS starterkits) with version 3.3.7
  • Using jQuery version 2.1
    • switching to jQuery 2.2 or 3.1 doesn't not help

Currently doing:

function winprevent_custom_page_build(&$page) {                                                  
  $themescript = drupal_get_path('theme', 'winprevent') . '/script.js';
  drupal_add_js($themescript, array('group' => JS_LIBRARY, 'weight' => -10));

...in a custom module to load the script from the theme. Notice the 'group' => JS_LIBRARY; this was necessary to get the file to load before admin_menu module's js. Disabling admin_menu stops it from breaking. The presence of admin_menu.js also breaks the animation of Bootstrap's collapse feature.

So scripts[] = script.js actually does work in the theme but only for anonymous users, it breaks for the authenticated users (who all have access to the admin menu).

0

First make sure that you have a core/jquery dependency in your.libraries.yml file like this:

js:
  js/script.js: {}
dependencies:
  - core/jquery 

And then write this code:

(function ($) {

Drupal.behaviors.myThemeScript = {
  attach: function (context, settings) {

     //code starts
     $('p').click(function(){
        alert("hello");
     });
    //code ends

  }
};

}(jQuery));

Make sure that you clear the cache after that you edit the .libraries file

Hope this will help you further.

0

what am I missing that it's not working in the Drupal theme

You're not using proper jQuery Drupal syntax

(function ($) {

     //code starts
     $('p').click(function(){
        alert("hello");
     });
    //code ends

}(jQuery)); 

See Working with JavaScript and jQuery for an in-depth explanation.

  • Thanks for the help, this doesn't work in my theme though an exact copy of the theme's script.js placed in in a custom module this does work. Do you have an ideas about getting the js to work within the theme? – alec Oct 1 '17 at 16:33
  • Did you flush the cache? – No Sssweat Oct 1 '17 at 22:42
  • 1
    Yes, I did. I thought Drupal.behaviors was for modules and not themes...? – alec Oct 2 '17 at 0:40
  • @alec I think you're right, try the updated code. – No Sssweat Oct 2 '17 at 1:07
  • Hm, yeah, still not working. Do you have any idea if this could be due to the fact that my bootstrap subtheme is using the CDN starterkit? That seems like it should not make a difference, but I've wondered if I should try making a new subtheme based on the SASS starterkit (it's the only guess I can come up with). – alec Oct 2 '17 at 1:27

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.