2011-01-13 11 views
32

Sto scrivendo il mio modulo Drupal 7 e mi piace usare JQuery al suo interno.Utilizzo di JQuery in Drupal 7

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

Ma sto ottenendo questo errore:

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

Sembra che JQuery non è stato caricato. Altrimenti $ dovrebbe essere definito.

Anche se io in realtà includo nell'intestazione:

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

Devo fare altro per attivare JQuery in Drupal? $ Viene sovrascritto da Drupal?

Questo è il sito web: http://rockfinder.orgapage.de

risposta

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.

si può anche solo usa la variabile 'jQuery' al posto della variabile $ nel tuo codice.

+0

Grazie! Questo è esattamente quello che stavo cercando e non riuscivo a trovare! – JochenJung

+3

Non conosco questa sintassi in Javascript. Qualcuno potrebbe spiegare cosa sta succedendo qui? –

+2

Fondamentalmente crea un alias da $ a jQuery. Come detto sopra, la ragione di ciò è includere altre librerie JS che stanno usando $. – Berdir

14

Secondo Firebug, il file jQuery viene caricato:

alt text

Ma la $ viene sovrascritto da qualcos'altro:

alt text


Che cosa si dovrebbe fare è incapsulare l'uso della variabile $ con una funzione che si richiama utilizzando l'oggetto jQuery in quanto è il primo argomento attuale:

(function ($) { 

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

}(jQuery)); 
+0

Quindi .. perché $ non è definito? Viene sovrascritto? – JochenJung

+2

È per evitare conflitti con altre librerie Javascript come Prototype. – Tapirboy

8

probabilità sono il vostro script non è inizializzato in questo modo, dovrete usare Drupal.behaviors.YOURTHEMENAME

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

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

} 

}; 
})(jQuery);  
+0

Questo risolto il mio problema Stavo usando d7. Grazie guus –

+2

non dovresti usare '} (jQuery))? Invece di'}) (jQuery); 'sull'ultima riga del tuo codice? – FLY

+0

tu leggenda assoluta, questo è! Tutti ascoltano, questo è come lo fai in Drupal !!!! – weaveoftheride

0

"$ non è una funzione" è un errore molto comune che si possono incontrare durante il lavoro con jQuery. Si può provare alcuna risposta su indicato di seguito:

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

O

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

Fondamentalmente questo permetterà ai nostri l'esecuzione di codice e utilizzare il $ scorciatoia per JQuery.

Problemi correlati