2

I'm trying to run a jquery script for my Drupal 8 site, but in the error console, I get a TypeError: $ is not a function. I know this usually happens when jQuery isn't loaded, but the jquery.min.js is loaded fine. Is it loaded too late? Do I perhaps need a wrapper?

In my theme.libraries.yml, I have the following:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
  js:
    js/script.js: {}
  dependencies:
    - core/jquery

My script is simply

$('#some-element').on('click', function() {
  // Do something
}

I would think this is all I need, or am I overlooking something?

Edit:

I don't think this is a duplicate question since:

  1. This is Drupal 8

  2. The dependency is defined in the libraries file. I would think this would take care of exactly the problem described in the other question.

  • I found the solution, but I would like to provide an answer, since it differs from the Drupal 7 behaviour. – Pim Oct 13 '16 at 10:35
  • since it differs from the Drupal 7 behaviour should be the same as D7. – No Sssweat Oct 13 '16 at 10:39
  • I'm sorry to say, but it isn't. – Pim Oct 13 '16 at 10:40
  • 1
    That's true, but that's the sort of tangential info I'm talking about. You haven't mentioned the Drupal variable at any point and it doesn't have any bearing on the question you actually asked, which is how people will end up here via search engines. If the question was "why is Drupal undefined", then that extra info becomes very useful. Otherwise, it's just s distraction from the actual question: why is $ undefined?" – Clive Oct 13 '16 at 10:52
  • 1
    Glad you got it sorted either way – Clive Oct 13 '16 at 10:53
3

In Drupal 8 jQuery is added in the non intrusive way, this means that $ is not defined in the global space.

What you should do is to use closures (this is a very good idea, as it makes it easy for you to fix potential issues with colliding variables names. $ is used by other frameworks as well.

This is done by wrapping your code in a anonymous function so you don't need to get variables from the window object but can get them from the function definition. This means that you can easily change the source one place and it will effect all of the script you have written.

(function ($, Drupal) {

  // It's best practice to use strict mode, can help avoid some browser issues.
  'use strict';

  // Generally you always want to use behaviors, remember to depend on Drupal js.
  Drupal.behaviors.name = {
    // Called on document ready and when no elements is added to the page.
    attach: function (context, settings) {
      $(".selector", context)...
    }
  }

  // Sometimes you just want to do something when DOM is ready.
  $(document).ready(function() {
    // Stuff to do as soon as the DOM is ready;
  });

})(window.jQuery, window.Drupal);

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.