2011-01-13 15 views
32

Escribo mi propio módulo Drupal 7 y me gusta usar JQuery en él.Uso de JQuery en Drupal 7

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

Pero estoy recibiendo este error:

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

Parece que jQuery no está cargado. De lo contrario $ debe ser definido.

A pesar de que en realidad lo incluye en el encabezado:

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

¿Tengo que hacer nada más para activar jQuery en Drupal? ¿Drupal sobrescribe $?

Esa es la página web: http://rockfinder.orgapage.de

Respuesta

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.

también puede simplemente use la variable 'jQuery' en lugar de la variable $ en su código.

+0

Gracias! ¡Eso es exactamente lo que estaba buscando y no pude encontrar! – JochenJung

+3

No estoy familiarizado con esta sintaxis en Javascript. ¿Podría alguien explicar lo que está pasando aquí? –

+2

Básicamente crea un alias de $ a jQuery. Como se dijo anteriormente, la razón para esto es incluir otras bibliotecas JS que están usando $. – Berdir

14

De acuerdo con Firebug, el archivo de jQuery se carga:

alt text

Pero el $ se sobrescribe por otra cosa:

alt text


Lo que debe hacer es encapsular el uso de la variable $ con una función que llama a sí mismo usando el objeto jQuery como su primer argumento actual:

(function ($) { 

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

}(jQuery)); 
+0

Entonces ... ¿por qué $ no está definido? ¿Se está sobrescribiendo? – JochenJung

+2

Es para evitar conflictos con otras bibliotecas Javascript como Prototype. – Tapirboy

8

Es probable que la secuencia de comandos no se ha inicializado esta manera, usted tendrá que usar Drupal.behaviors.YOURTHEMENAME

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

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

} 

}; 
})(jQuery);  
+0

Este resolvió mi problema Estaba usando d7. Gracias guus –

+2

¿no deberías usar '} (jQuery));' en lugar de '}) (jQuery);' en la última línea de tu código? – FLY

+0

usted absoluta leyenda, ¡esto es! Todos escuchen, ¡así es como lo hacen en Drupal! – weaveoftheride

0

"$ no es una función" es un error muy común que usted puede hacer frente mientras se trabaja con jQuery. Usted puede tratar de cualquier respuesta de a continuación:

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

O

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

Básicamente esto permitirá que nuestro código para ejecutar y utilizar el acceso directo para jQuery $.

Cuestiones relacionadas