web-dev-qa-db-fra.com

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 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 depuis 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 modèles, 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!

themingblocksjavascript
8
apdr

Quelques choses ici:

  1. Si vous pouvez éviter d'entrer javascript et PHP dans le site via l'interface utilisateur, cela vous évitera peut-être des ennuis sur la ligne. Si vous n'avez pas d'alternatives, c'est ok mais voici quelques raisons pour lesquelles ce n'est pas le cas. une excellente idée: https://drupal.stackexchange.com/a/2512/10729 (notez que cela vise PHP, pas js mais la plupart des points représentent encore js). Le - exemples le module a 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 que dans certains endroits, utilisez plutôt drupal_add_js () donc ce n'est que sur les pages qu'il doit être. Pour attacher le comportement js aux formulaires, vous pouvez également utiliser l'attribut # attaché 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 drupal comportements au lieu du document prêt.

Par exemple:

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

Je recommande de lire ces pages:
Gestion de JavaScript dans Drupal 7
Travailler avec JavaScript et jQuery

11
rooby

Dans votre . Js insérez 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 juste themename

7
sibiru

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. bonnes références ici et ici .

vider le cache souvent;)

3
please_reboot