Using JQuery in Drupal 7

Question

I'm writing my own Drupal 7 module, and like to use JQuery in it.

$('#field').toggle();

But I'm getting this error:

TypeError: Property '$' of object [object DOMWindow] is not a function

It seems that JQuery is not loaded. Otherwise $ should be defined.

Though I actually include it in the header:

<script type="text/javascript" src="http://rockfinder.de/misc/jquery.js?v=1.4.4"></script>

Do I have to do anything else to activate JQuery in Drupal? Is $ being overwritten by Drupal?

That's the website: http://rockfinder.orgapage.de

Paraldehyde

Answer 1

From the Drupal 7 upgrade guide:

Javascript should be made compatible with other libraries than jQuery by adding a small wrapper around your existing code:

(function ($) {
  // Original JavaScript code.
})(jQuery);

The $ global will no longer refer to the jquery object. However, with this construction, the local variable $ will refer to jquery, allowing your code to access jQuery through $ anyway, while the code will not conflict with other libraries that use the $ global.

You can also just use the 'jQuery' variable instead of the $ variable in your code.

Postern

Thanks! That's exactly what I was looking for and couldn't find! – Paraldehyde

I'm unfamiliar with this syntax in Javascript. Could someone explain what's going on here? – Commensurate

It basically creates an alias from $ to jQuery. As said above, the reason for this is to include other JS libraries which are using the $. – Physician

For some reason that gave me a long error message, but when i just replaced $ with jQuery it worked just fine. – Fireplug

@Jim The code is wrapped into a function having a parameter $. Then it is called with jQuery, which executes the function by replacing all instances of $ with jQuery. This is one of the three methods to work around the '$ is not a function' issue (see tshikatshikaaa.blogspot.com/2012/05/…) – Receptacle

Answer 2

According to Firebug, your jQuery file is being loaded:

But the $ is being overwritten by something else:

---

What you should do is encapsulate the use of the $ variable with a function that invokes itself using the jQuery object as it's first actual argument:

(function ($) {

 // in this function, you can use the $ which refers to the jQuery object

}(jQuery));

Missing

So.. why is $ not defined? Is it being overwritten? – Paraldehyde

It's to avoid conflicts with other Javascript libraries such as Prototype. – Foreignborn

Answer 3

Chances are your script is not initialized this way, you'll have to use Drupal.behaviors.YOURTHEMENAME

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

/*Add your js code here*/
alert('Code');

}

};
})(jQuery);    

Buddle

shouldn't you use }(jQuery)); instead of })(jQuery); on the last line of your code? – Viradis

you absolute legend, this is it! Everyone listen, this is how you do it in Drupal!!!! – Surrebutter

Answer 4

"$ is not a function" is a very common error that you may face while working with jQuery. You can try any answers of given below:

(function($){
//your can write your code here with $ prefix
})(jQuery);

OR

jQuery(document).ready(function($){
//Write your code here
});

Basically this will allow our code to run and use the $ shortcut for JQuery.

Distrain

Answer 5

You can create the separate file for js and than add js file using the following:

drupal_add_js('path', 'module_name');

Ethnography