Comment faire fonctionner jquery sur Drupal 7 - pour les débutants

J'ai lu de nombreux tutoriels en ligne sur la façon de faire fonctionner jquery sur Drupal 7. Bien qu'il existe de nombreuses lignes de code et d'exemples, ce que je ne trouve pas, c'est quel morceau de code mettre où (peut-être que c'est évident pour la plupart des développeurs)

Donc ce que je fais c'est

1) Je crée un nouveau bloc personnalisé

2) Là-bas de drupal UI, j'écris mon code

(function ($) {

  $(document).ready(function(){

    // jquery here

  });
})(jQuery);

3) J'affiche le bloc, mais la requête n'est pas chargée.

Je lis que je devrais mettre ce code dans des fichiers de modèle, des fichiers de thème, des fichiers CSS, des fichiers d'informations et je ne sais pas quoi d'autre!

Il n'est pas clair pour moi dans quel fichier exactement et dans quel chemin je dois mettre le code ci-dessus pour fonctionner correctement?

Aucun conseil?

Merci beaucoup!

Quelques choses ici:

1. Si vous pouvez éviter d'entrer javascript et PHP dans le site via l'interface utilisateur, cela vous évitera éventuellement des problèmes sur toute la ligne. Si vous n'avez pas d'alternative, c'est ok mais voici quelques raisons pour lesquelles ce n'est pas une bonne idée: https://drupal.stackexchange.com/a/2512/10729 (notez que cela vise PHP, pas js mais la plupart des les points représentent encore js). Le module d' exemples contient un exemple de création de blocs personnalisés.
2. Pour joindre js, si vous le souhaitez sur toutes les pages, vous pouvez l'ajouter au fichier d'informations de votre thème. Si vous ne le souhaitez qu'à certains endroits, utilisez de préférence drupal_add_js () afin qu'il ne soit que sur les pages. Pour attacher le comportement js aux formulaires, vous pouvez également utiliser l' attribut #attached sur vos éléments de formulaire.
3. Si vous utilisez $ (document) .ready (), il lancera votre javascript au chargement de la page, cependant si la page est mise à jour via ajax, votre javascript ne se déclenchera pas à nouveau, donc le nouveau balisage ne sera pas affecté par votre javascript est. Pour gérer ces cas, vous devez utiliser des comportements drupaux au lieu de document prêt.

Par exemple:

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

Je recommande de lire ces pages:
Gérer JavaScript dans Drupal 7
Travailler avec JavaScript et jQuery

Dans votre .js insérer comme ce code;

(function ($) {  

  Drupal.behaviors.themename = {

    attach: function (context, settings) {            

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

   }

 };})(jQuery);

Dans votre thème template.php créez hook_preprocess_html puis utilisez drupal_add_js

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

Changez simplement le nom

votre fichier .js devrait ressembler à ceci:

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

        //your code

        }
    }
}(jQuery));

utilisez drupal_add_js () dans votre module pour ajouter ce fichier dans Drupal. de bonnes références ici et ici .

vider le cache souvent;)