2011-01-13 10 views
32

Ich schreibe mein eigenes Drupal 7-Modul und möchte JQuery darin verwenden.Verwenden von JQuery in Drupal 7

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

Aber ich bin immer diese Fehlermeldung:

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

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

Obwohl ich es im Header tatsächlich sind:

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

Muss ich irgendetwas anderes zu aktivieren JQuery in Drupal zu tun? Wird $ von Drupal überschrieben?

, dass die Website ist: http://rockfinder.orgapage.de

Antwort

89

From the Drupal 7 upgrade guide:

Javascript should be made compatible with other libraries than jQuery by adding a small wrapper around your existing code:

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

The $ global will no longer refer to the jquery object. However, with this construction, the local variable $ will refer to jquery, allowing your code to access jQuery through $ anyway, while the code will not conflict with other libraries that use the $ global.

können Sie auch einfach Verwenden Sie die Variable 'jQuery' anstelle der Variablen '$' in Ihrem Code.

+0

Danke! Genau das habe ich gesucht und konnte nicht finden! – JochenJung

+3

Ich bin nicht mit dieser Syntax in Javascript vertraut. Könnte jemand erklären, was hier vor sich geht? –

+2

Es erstellt im Grunde einen Alias ​​von $ zu jQuery. Wie oben erwähnt, ist der Grund dafür, andere JS-Bibliotheken einzuschließen, die das $ verwenden. – Berdir

14

Nach Firebug, Ihre jQuery-Datei geladen wird:

alt text

Aber die $ durch etwas anderes überschrieben wird:

alt text


Was sollten Sie tun, ist die Verwendung des $ Variable mit einer Funktion kapseln, die sich das jQuery-Objekt aufruft, wie es zunächst tatsächliches Argument ist:

(function ($) { 

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

}(jQuery)); 
+0

Also ... warum ist $ nicht definiert? Wird es überschrieben? – JochenJung

+2

Es ist zu vermeiden, Konflikte mit anderen Javascript-Bibliotheken wie Prototype. – Tapirboy

8

Die Chancen stehen gut Ihr Skript nicht auf diese Weise initialisiert wird, werden Sie Drupal.behaviors.YOURTHEMENAME

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

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

} 

}; 
})(jQuery);  
+0

Dieser löste mein Problem. Ich habe d7 benutzt. Danke guus –

+2

sollten Sie nicht '} (jQuery));' statt '}) (jQuery);' in der letzten Zeile Ihres Codes verwenden? – FLY

+0

du absolute Legende, das ist es! Jeder hört zu, so macht man es in Drupal !!!! – weaveoftheride

0

„$ ist keine Funktion“ ist eine sehr häufige Fehler, die Sie möglicherweise beim Arbeiten verwenden müssen mit jQuery. Sie können versuchen, alle Antworten von unten angegeben:

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

ODER

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

Im Grunde ist dies unser Code ermöglicht die $ Abkürzung für JQuery auszuführen und zu verwenden.