Changements dans la façon dont Drupal 7 gère JavaScript et jQuery

14

Je développe actuellement un script JavaScript qui s'exécute sur une page d'administration. J'ai lu les modifications apportées à 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 sais pas ce que je manque ici, mais je soupçonne que cela a à voir avec la façon dont je fais référence à l'objet. En regardant le code JavaScript de Views 3, je peux voir que cela se fait de manière similaire.

7 javascript

— numérique
source

Si vous console.log ($ ('# edit-apiusername')); affiche-t-il l'objet, c'est-à-dire que l'élément est trouvé sur la page par jQuery?

— budda

Même avec Drupal 6, vous étiez censé utiliser les comportements Drupal à la place de document.ready. Ce que vous

— signalez

28

Je pense que vous avez mal compris les changements.

Le code JavaScript doit être encapsulé (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 jQuery.ready(function(){ ... }).

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

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

— Pierre Buyle
source

1

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.

— Artur
source