8

I have been reading many tutorials online on how to get jquery working on drupal 7. Although there are many lines of code and examples, what i cannot find is what piece of code to put where (maybe it is obvious for most of the developers)

So, what I do is

1)I create a new custom block

2)Over there from drupal UI, I write my code

(function ($) {

  $(document).ready(function(){

    // jquery here

  });
})(jQuery);

3)I display the block, but the jquery is not loaded.

I am reading that I should be putting this code in template files , theme files, css files, info files and I do not know whatelse!

It is not clear to me in which file exactly and in which path I have to put the above code to work properly ?

Any advice?

Many thanks!

Improve this question

3 Answers 3

Reset to default
11

A couple of things here:

  1. If you can avoid entering javascript and PHP into the site via the UI it will possibly save you troubles down the line. If you have no alternatives it is ok but here are some reasons why it is not a great idea: https://drupal.stackexchange.com/a/2512/10729 (note that that is aimed at PHP, not js but most of the points still stand for js). The examples module has an example of creating custom blocks.
  2. For attaching js, if you want it on all pages you can add it to your theme's info file. If you only want it in some places though, best to use drupal_add_js() so it is only on pages it needs to be. For attaching js behaviour to forms you can also use #attached attribute on your form items.
  3. If you use $(document).ready(), it will fire your javascript when the page loads, however if the page is updated via ajax then your javascript will not fire again, so new markup won't be affected by whatever your javascript is. To handle these cases you should use drupal behaviors instead of document ready.

For example:

(function ($) {
  Drupal.behaviors.yourBehaviorName = {
    attach: function (context, settings) {
      // Do your thing here.
    }
  };
})(jQuery);

I recommend reading these pages:
Managing JavaScript in Drupal 7
Working with JavaScript and jQuery

Improve this answer
7

In your .js insert like this code;

(function ($) {  

  Drupal.behaviors.themename = {

    attach: function (context, settings) {            

     // All our js code here
     alert('Hello jQuery');
     // end our js code

   }

 };})(jQuery);

In your theme template.php create hook_preprocess_html then using drupal_add_js

function themename_preprocess_html(&$variables) {
  drupal_add_js(drupal_get_path('theme', 'themename') . '/js/your.js', array( 
    'scope' => 'footer', 
    'weight' => '15' 
  ));
}

Just change themename

Improve this answer
3
  • 1
    Note that this will add the javascript to every page, which may or may not be desirable.
    – rooby
    May 1, 2013 at 13:42
  • 1
    Hehe yes this will add the javascript to every page. Just let @apdr try that and testing with his knowledge
    – sibiru
    May 1, 2013 at 13:45
  • 2
    if you want to have the js loaded on every page via the theme, wouldn't make more sense to just list the file in the theme's .info file?
    – Jimajamma
    May 1, 2013 at 16:20
3

your .js file should look like this :

(function ($) {
    Drupal.behaviors.cdgi = {
        attach: function(context) {

        //your code

        }
    }
}(jQuery));

use drupal_add_js() in your module to add this file in Drupal. good references here and here.

clear cache often ;)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.