Verwendung von JQuery in Drupal 7

Lesezeit: 3 Minuten

Benutzer-Avatar
Jochen Jung

Ich schreibe mein eigenes Drupal 7-Modul und verwende darin gerne JQuery.

$('#field').toggle();

Aber ich bekomme diesen Fehler:

TypeError: Property '$' of object [object DOMWindow] is not a function

Es scheint, dass JQuery nicht geladen ist. Andernfalls sollte $ definiert werden.

Obwohl ich es tatsächlich in die Überschrift einfüge:

<script type="text/javascript" src="http://rockfinder.de/misc/jquery.js?v=1.4.4"></script>

Muss ich noch etwas tun, um JQuery in Drupal zu aktivieren? Wird $ von Drupal überschrieben?

Das ist die Webseite: http://rockfinder.orgapage.de

Aus dem Drupal 7-Upgrade-Leitfaden:

Javascript sollte mit anderen Bibliotheken als jQuery kompatibel gemacht werden, indem Sie einen kleinen Wrapper um Ihren vorhandenen Code hinzufügen:

(function ($) {
  // Original JavaScript code.
})(jQuery);

Das globale $ bezieht sich nicht mehr auf das jquery-Objekt. Bei dieser Konstruktion verweist die lokale Variable $ jedoch auf jquery, sodass Ihr Code trotzdem über $ auf jQuery zugreifen kann, während der Code nicht mit anderen Bibliotheken kollidiert, die das globale $ verwenden.

Sie können auch einfach die ‘jQuery’-Variable anstelle der $-Variablen in Ihrem Code verwenden.

  • Vielen Dank! Genau das habe ich gesucht und nicht gefunden!

    – Jochen Jung

    13. Januar 2011 um 15:04 Uhr

  • Ich bin mit dieser Syntax in Javascript nicht vertraut. Könnte jemand erklären, was hier los ist?

    – Jim Greenleaf

    18. Januar 2011 um 19:09 Uhr

  • Es erstellt im Grunde einen Alias ​​von $ zu jQuery. Wie oben erwähnt, liegt der Grund dafür darin, andere JS-Bibliotheken einzubeziehen, die die $.

    – Berdi

    30. Januar 2011 um 23:51 Uhr

  • Aus irgendeinem Grund gab mir das eine lange Fehlermeldung, aber als ich $ durch jQuery ersetzte, funktionierte es einwandfrei.

    – Jasmo

    29. März 2012 um 9:51 Uhr

  • @Jim Der Code wird in eine Funktion mit einem Parameter $ gepackt. Dann wird es mit jQuery aufgerufen, das die Funktion ausführt, indem es alle Instanzen von $ durch jQuery ersetzt. Dies ist eine der drei Methoden, um das Problem „$ ist keine Funktion“ zu umgehen (siehe tshikatshikaaa.blogspot.com/2012/05/…)

    – Jérôme Verstrynge

    15. Mai 2012 um 21:15 Uhr

Benutzer-Avatar
Andreas Gretsch

Laut Firebug wird Ihre jQuery-Datei geladen:

Alt-Text

Aber die $ wird von etwas anderem überschrieben:

Alt-Text


Was Sie tun sollten, ist die Verwendung von zu kapseln $ Variable mit einer Funktion, die sich selbst mithilfe von aufruft jQuery Objekt als erstes tatsächliches Argument:

(function ($) {

 // in this function, you can use the $ which refers to the jQuery object

}(jQuery));

  • Also … warum ist $ nicht definiert? Wird es überschrieben?

    – Jochen Jung

    13. Januar 2011 um 14:53 Uhr

  • Es soll Konflikte mit anderen Javascript-Bibliotheken wie Prototype vermeiden.

    – JGSebring

    24. Januar 2012 um 12:58 Uhr

Möglicherweise wird Ihr Skript nicht auf diese Weise initialisiert, Sie müssen Drupal.behaviors.YOURTHEMENAME verwenden

(function ($) {
Drupal.behaviors.YOURTHEMENAME = {
attach: function(context, settings) {

/*Add your js code here*/
alert('Code');

}

};
})(jQuery);    

  • solltest du nicht verwenden }(jQuery)); Anstatt von })(jQuery); in der letzten Zeile deines Codes?

    – FLIEGEN

    11. April 2012 um 13:58 Uhr


  • Du absolute Legende, das ist es! Alle zuhören, so macht man es in Drupal!!!!

    – Webart

    24. März 2013 um 12:45 Uhr

„$ ist keine Funktion“ ist ein sehr häufiger Fehler, auf den Sie bei der Arbeit mit jQuery stoßen können. Sie können alle unten angegebenen Antworten versuchen:

(function($){
//your can write your code here with $ prefix
})(jQuery);

ODER

jQuery(document).ready(function($){
//Write your code here
});

Im Grunde wird dadurch unser Code ausgeführt und die $-Verknüpfung für JQuery verwendet.

Sie können die separate Datei für js erstellen und dann die js-Datei wie folgt hinzufügen:

drupal_add_js('path', 'module_name');

1204900cookie-checkVerwendung von JQuery in Drupal 7

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy