Zmiany w sposobie, w jaki Drupal 7 obsługuje JavaScript i jQuery

14

Obecnie opracowuję skrypt JavaScript, który działa na stronie administracyjnej. Przeczytałem o zmianach dokonanych w Drupal 7, a mianowicie o przejściu z document.ready()własnej funkcji jQuery. Poniższy skrypt nie działa.

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

console.log()strzela i widzę wynik, ale prosty dodatek nie działa. Identyfikator pola jest poprawny.
Nie jestem pewien, czego tu brakuje, ale podejrzewam, że ma to związek ze sposobem, w jaki odwołuję się do obiektu. Patrząc na kod JavaScript wyświetleń 3, widzę, że zrobiono to w podobny sposób.

7 javascript cyfrowy
źródło
Jeśli masz console.log ($ ('# edit-apiusername')); czy wyświetla obiekt, tj. czy element znajduje się na stronie przez jQuery?
budda
Nawet z Drupalem 6 zamiast tego miałeś używać zachowań Drupala document.ready. To, co zgłaszasz, nie dotyczy Drupala 7.
kiamlaluno

Odpowiedzi:

28

Myślę, że źle zrozumiałeś zmiany.

Kod JavaScript powinien być zawinięty, (function ($) { ... })(jQuery);aby umożliwić użycie $jako skrótu do jQuery. Ma to na celu umożliwienie jQuery przyjemnej gry z innymi bibliotekami . W tej funkcji nadal musisz czekać na załadowanie DOM, jeśli chcesz go zmienić. To właśnie robi zawijanie twojego kodu jQuery.ready(function(){ ... }).

Ale zamiast używać jQuery.ready(function(){ ... }), powinieneś użyć zachowań, aby skrypt JavaScript Drupala wiedział, że Twój kod chce przetwarzać wszystko, co zostało dodane ( lub usunięte ) z DOM.

(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function(context, settings) {
      $(context).find('#edit-apiusername').append('test');
    }
  }
})(jQuery);
Pierre Buyle
źródło
1

Możesz również rozważyć aliasing całego obiektu jQuery do innej wybranej zmiennej, jak w:

$j = jQuery.noConflict();

Umieściłbyś to poza gotową instrukcją, aby pozostało dostępne poza enkapsulacją.

Artur
źródło