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 (over 12 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 (over 12 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 (over 12 years ago)
You can also use jQuery instead of $, and it should work. For example:
paras•Tuesday, Jul 10th 2012 (about 12 years ago)
hey thanks it works !!!!1
Warvector•Tuesday, Oct 30th 2012 (almost 12 years ago)
Put this before your JS code : var $ = jQuery.noConflict();
You can use "$" now ! ;)
Gigante•Sunday, Nov 11th 2012 (almost 12 years ago)
Dude.. you are my hero.. thanks a lot :D
time to sleep..
Berkan•Sunday, Nov 11th 2012 (almost 12 years ago)
This worked for me! thanks a lot :)
Janeth•Thursday, Dec 6th 2012 (almost 12 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 (almost 12 years ago)
Never mind, your solution worked. I am just tired lol. bye!
behzad•Friday, Aug 16th 2013 (about 11 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 (almost 11 years ago)
This was the only solution that worked for me.
robin•Monday, May 5th 2014 (over 10 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 (almost 10 years ago)
Thank you sir, you are a god.
manindar•Friday, Jan 30th 2015 (over 9 years ago)
Hai where can place this code from drupal theme
eiriksm•Friday, Jan 30th 2015 (over 9 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 (over 8 years ago)
try :
jQuery(function($){
....
});
Dhanashree•Tuesday, May 15th 2018 (over 6 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.