Well this one drove me nuts for a while. Why is jQuery not working in Drupal 7? For those of you writing custom jQuery for your theme or module, you might have experienced that you get the error “$ is not a function” in Drupal 7. “Don't bullshit me, $ is a function you smartass” was my first reaction to this. I was checking the sources and finding that jQuery loaded just fine, as it is of course in core.
The very simple solution is wrapping your jQuery in this pretty function:
(function ($) {
//jQuery code. Will proceed with a gif related example.
$('#anigif').click(function () {
$('#anigif2').slideToggle();
});
//End of gif related example. Put your code between these comments;
})(jQuery);
The reason you have to do this is because Drupal 7 wants to have a high compatibility with other javascript libraries, and so you can probably see why $ is not a function, although jQuery does indeed work in Drupal 7.
There are also other ways around this I guess, but this works for me.
Maedi•Tuesday, Jan 24th 2012 (about 11 years ago)
I had this problem too and was genuinely stumped! By the way, I've created an issue against Drupal core about solving this problem by making jQuery the default JavaScript library:
http://drupal.org/node/1407256
Someguy•Saturday, May 12th 2012 (almost 11 years ago)
Did the wrap shown here - same result. $ is still not a function. Firebug shows jQuery loaded OK. Don't know wtf.
eiriksm•Saturday, May 12th 2012 (almost 11 years ago)
You can also use jQuery instead of $, and it should work. For example:
paras•Tuesday, Jul 10th 2012 (over 10 years ago)
hey thanks it works !!!!1
Warvector•Tuesday, Oct 30th 2012 (over 10 years ago)
Put this before your JS code : var $ = jQuery.noConflict();
You can use "$" now ! ;)
Gigante•Sunday, Nov 11th 2012 (over 10 years ago)
Dude.. you are my hero.. thanks a lot :D
time to sleep..
Berkan•Sunday, Nov 11th 2012 (over 10 years ago)
This worked for me! thanks a lot :)
Janeth•Thursday, Dec 6th 2012 (about 10 years ago)
What about when you get TypeError: jQuery("#wowslider-container1").wowSlider is not a function
For some reason your code is not working for me. :(
Any help will be greatly appreciated. Thanks
Janeth•Thursday, Dec 6th 2012 (about 10 years ago)
Never mind, your solution worked. I am just tired lol. bye!
behzad•Friday, Aug 16th 2013 (over 9 years ago)
to avoid conflicts with other JS libraries "$" does not make scene in .js files globally.
So you should add following code surrounding js codes :
(function($) {
Drupal.behaviors.naturalessenceTheme = {
attach: function(context, settings) {
$('selector').mouseover(function() {
//now working
});
}
};
})(jQuery);
Answered By web developer and design group
loui•Friday, Nov 1st 2013 (over 9 years ago)
This was the only solution that worked for me.
robin•Monday, May 5th 2014 (almost 9 years ago)
Hi,
My hover will not working on drupal 7.
Can you tell me where i can find the directory and file name for the code. /misc/ or another and the js filename.
Nothing will help for my hover.
Meh•Sunday, Oct 26th 2014 (over 8 years ago)
Thank you sir, you are a god.
manindar•Friday, Jan 30th 2015 (about 8 years ago)
Hai where can place this code from drupal theme
eiriksm•Friday, Jan 30th 2015 (about 8 years ago)
Hello.
That depends. If you are looking for a way to use a couple of lines of jQuery you found online, then save the above code in a new file, and add those lines as described.
flo•Wednesday, May 11th 2016 (almost 7 years ago)
try :
jQuery(function($){
....
});
Dhanashree•Tuesday, May 15th 2018 (almost 5 years ago)
I had a problem with jquery. stuck with this from past 1 week. Please help.
here is my code:
<script type="text/javascript">
(function ($) {
displayTableAjax(, );
})(jQuery);
</script>
JS loading properly but every time i get an error message as 'Uncaught ReferenceError: jQuery is not defined'
Do you want to comment?
This article uses github for commenting. To comment, you can visit https://github.com/eiriksm/eiriksm.dev-comments/issues/18.