WebTechKitchen; Your Web Technology Kitchen, contact us to create, or maintain your websites and other digital properties.

Getting JQuery to work in Drupal

Submitted by barnettech on Wed, 07/31/2013 - 05:04

The following JQuery code if put into your simple_module.js file will work:

(function($) {
   $().ready(function() {
     alert('hello');
     $('#hide').live('click', function(){
       alert('hiding an element with jquery');
      $('#hide').hide();
    });
 })(jQuery);

This is assuming that in your simple_module.module file you had HTML with an id that is called "hide", and that element when clicked will disappear from the screen since we've used jquery's .hide() functionality. The .hide function is documented here: http://api.jquery.com/hide/

Note you only need to wrap your javascript one time with the

(function($) {  })(jQuery); 

function. This function is necessary in Drupal now because Drupal is going for no conflict with the $ character with other libraries.  More documentation on running JQuery in no conflict mode can been seen here: http://api.jquery.com/jQuery.noConflict/