web-dev-qa-db-fra.com

Changements dans la manière Drupal 7 gère JavaScript et jQuery

Je développe actuellement un script JavaScript qui s'exécute sur une page d'administration. J'ai lu les modifications apportées dans Drupal 7, à savoir le passage de document.ready() à sa propre fonction jQuery. Cependant, le script suivant ne fonctionne pas.

(function ($) {
  console.log('hello');
  $('#edit-apiusername').append('test');
})(jQuery);

console.log() se déclenche et je peux voir la sortie, mais le simple ajout ne fonctionne pas. L'ID de champ est correct.
Je ne suis pas sûr de ce que je manque ici, mais je soupçonne que cela a à voir avec la façon dont je référence l'objet. En regardant le code JavaScript de Views 3, je peux voir que cela se fait de manière similaire.

7javascript
14
digital

Je pense que vous avez mal compris les changements.

Le code JavaScript doit être entouré de (function ($) { ... })(jQuery); Pour permettre l'utilisation de $ Comme raccourci vers jQuery. C'est pour permettre à jQuery de bien jouer avec d'autres bibliothèques . Dans cette fonction, vous devez toujours attendre que le DOM soit chargé si vous souhaitez le modifier. C'est ce que fait votre code dans jQuery.ready(function(){ ... }).

Mais au lieu d'utiliser jQuery.ready(function(){ ... }), vous devriez tiliser des comportements pour laisser le JavaScript de Drupal savoir que votre code veut traiter tout ce qui est ajouté ( ou supprimé ) à partir du DOM .

(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function(context, settings) {
      $(context).find('#edit-apiusername').append('test');
    }
  }
})(jQuery);
28
Pierre Buyle

Vous pouvez également envisager d'aliaser l'intégralité de l'objet jQuery vers une autre variable de votre choix, comme dans:

$j = jQuery.noConflict();

Vous mettriez cela en dehors de l'instruction ready pour le laisser accessible en dehors de l'encapsulation.

1
Artur