Änderungen im Umgang mit JavaScript und jQuery in Drupal 7

14

Ich entwickle derzeit ein JavaScript-Skript, das auf einer Verwaltungsseite ausgeführt wird. Ich habe die Änderungen in Drupal 7 nachgelesen, nämlich die Umstellung document.ready()auf eine eigene jQuery-Funktion. Das folgende Skript funktioniert jedoch nicht.

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

console.log()wird ausgelöst und ich kann die Ausgabe sehen, aber das einfache Anhängen funktioniert nicht. Die Feld-ID ist korrekt.
Ich bin mir nicht sicher, was ich hier vermisse, aber ich vermute, dass es mit der Art und Weise zu tun hat, wie ich das Objekt referenziere. Wenn ich mir den JavaScript-Code von Views 3 anschaue, sehe ich, dass dies auf ähnliche Weise geschieht.

7 javascript

— Digital
quelle

Wenn Sie console.log ($ ('# edit-apiusername')); Gibt es das Objekt aus, dh wird das Element von jQuery auf der Seite gefunden?

— Budda

Sogar mit Drupal 6 sollten Sie das Drupal-Verhalten verwenden, anstatt document.ready. Was Sie melden, ist nicht spezifisch für Drupal 7.

— kiamlaluno

28

Ich denke, Sie haben die Änderungen missverstanden.

JavaScript-Code sollte eingebunden sein (function ($) { ... })(jQuery);, damit er $als Verknüpfung zu verwendet werden kann jQuery. Auf diese Weise kann jQuery problemlos mit anderen Bibliotheken verwendet werden . In dieser Funktion müssen Sie noch warten, bis das DOM geladen ist, wenn Sie es ändern möchten. Das ist , was Ihr Code in Einwickeln der jQuery.ready(function(){ ... })Fall ist.

Anstatt jedoch zu verwenden jQuery.ready(function(){ ... }), sollten Sie Verhalten verwenden , um Drupals JavaScript mitzuteilen, dass Ihr Code alles verarbeiten möchte, was dem DOM hinzugefügt ( oder daraus entfernt ) wurde.

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

— Pierre Buyle
quelle

1

Sie könnten auch in Betracht ziehen, das gesamte jQuery-Objekt einer anderen Variablen Ihrer Wahl zuzuweisen, wie in:

$j = jQuery.noConflict();

Sie würden diese Anweisung außerhalb der Anweisung "ready" setzen, um sie außerhalb der Kapselung zugänglich zu machen.

— Artur
quelle