2011-01-17 15 views
8

Ha pasado un tiempo desde que trabajé con jQuery; Creo que estoy cometiendo un error estúpido.

Aquí es un widget Django:

class FooWidget(Widget): 

    # ... 

    class Media: 
     js = ('js/foowidget.js',) 

Aquí está el archivo .js:

alert("bar"); 

$(document).ready(function() { 
    alert("omfg"); 
    $('.foo-widget').click(function() { 
    alert("hi"); 
    return false; 
    }); 
}); 

alert("foo"); 

La única alert() que dispara es la primera. ¿Tengo un error de sintaxis estúpido o algo así?

Además, si alguna otra secuencia de comandos incluida en la página redefine $(document).ready, ¿tengo que preocuparme por ello? Estoy adivinando que las definiciones posteriores anularán la mía, así que es más seguro para las definiciones posteriores a hacer algo como:

$(document).ready(function() { 
    document.ready() 
    // real stuff 
}); 

jQuery ya está incluido en la página en el momento en foowidget.js es.

actualización: Basado en el enlace de @ lazerscience, probé el siguiente en su lugar, pero aún no igual que antes:

alert("bar"); 

$(function() { 
    alert("omfg"); 
    $(".set-widget").click(function() { 
    alert("hi"); 
    return false; 
    }); 
}); 

alert("foo"); 

Actualización 2: Curiosamente, cuando lo haga:

alert($); 

Me sale "indefinido". Esto sugiere que jQuery en realidad no se ha inicializado. Esto me confunde, porque el <head> incluye:

<script type="text/javascript" src="/media/js/jquery.min.js"></script> 
<script type="text/javascript" src="/media/js/jquery.init.js"></script> 
<script type="text/javascript" src="/media/js/actions.min.js"></script> 
<script type="text/javascript" src="/static/js/foowidget.js"></script> 

no poner mi guión después de los scripts jQuery asegurar que $ se definirá?

Actualización 3: desde jquery.min.js:

/*! 
* jQuery JavaScript Library v1.4.2 
* http://jquery.com/ 
* 
* Copyright 2010, John Resig 
* Dual licensed under the MIT or GPL Version 2 licenses. 
* http://jquery.org/license 
* 
* Includes Sizzle.js 
* http://sizzlejs.com/ 
* Copyright 2010, The Dojo Foundation 
* Released under the MIT, BSD, and GPL Licenses. 
* 
* Date: Sat Feb 13 22:33:48 2010 -0500 
*/ 
(function(A,w){function ma(){if(!c.isReady){try{s.documentElement.doScroll("left")}catch(a){setTimeout(ma,1);return}c.ready()}}function Qa(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||"");b.parentNode&&b.parentNode.removeChild(b)}function X(a,b,d,f,e,j){var i=a.length;if(typeof b==="object"){for(var o in b)X(a,o,b[o],f,e,d);return a}if(d!==w){f=!j&&f&&c.isFunction(d);for(o=0;o<i;o++)e(a[o],b,f?d.call(a[o],o,e(a[o],b)):d,j);return a}return i? /* ... */ 

parece correcto para mí.

Esto es de la consola de Firebug:

Error: $ is not a function 
[Break On This Error] $(function() { 
foowidget.js (line 5) 
>>> $ 
anonymous() 
>>> jQuery 
undefined 
>>> $('a') 
null 
>>> $(document) 
null 

Update 4: $ se define en todas las páginas de mi sitio web Django, excepto la aplicación de administración. Impar ...

Actualización 5: Esto es interesante.

jQuery.init.js:

// Puts the included jQuery into our own namespace 
var django = { 
"jQuery": jQuery.noConflict(true) 
}; 

Desde la consola:

>>> $ 
anonymous() 
>>> django 
Object {} 
>>> django.jQuery 
function() 
>>> django.jQuery('a') 
[a /admin/p..._change/, a /admin/logout/, a ../../, a ../, a.addlink add/] 
+0

¿Utiliza alguna herramienta de desarrollador como Firebug o Chrome Developer Tools? –

+0

Debe confirmar que la etiqueta de script /media/js/jquery.min.js realmente devuelve la biblioteca jquery. – Andrew

+0

Miré el archivo. Parece ser la biblioteca jQuery, aunque no hice una diferencia. –

Respuesta

1

Puede utilizar $(document).ready()as often as you want to on one page.No redefine nada como lo llame, pero la llamada de ready() agrega funciones que se invocan cuando "el documento está listo". Para depurar su código, p. Ej. usa Firebug que te mostrará información más detallada sobre dónde ocurre el error si hay alguno.

+0

Firebug se queja de que $ no está definido (ver arriba) –

+13

Si está utilizando el jQuery cargado por django, ajuste su código con '(función ($) { // su código aquí ... }) (django.jQuery); '! –

0

En Firefox, vea el código fuente de la página, luego haga clic en el enlace "/media/js/jquery.min.js" para ver si se cargó. Lo más probable es que obtenga un 404 porque no definió correctamente la URL del medio.

También puede usar el servidor de desarrollo para este propósito, le mostrará todas las solicitudes y se mostrará el código de estado HTTP.

+0

Lo revisé, y no está 404ing. Es el código jQuery, como lo actualicé arriba. –

3

Utilice la consola Firebug o Web Inspector JS y escriba $ y/o jQuery. Esa es la forma más sencilla de averiguar si la biblioteca se ha cargado correctamente. En el caso poco probable, que sólo jQuery se define, se puede envolver su script en su propio ámbito de aplicación:

(function($){ 
    // your code here… 
})(jQuery); 

Si nada se define en la consola, el problema es más probable con el archivo y que iba a tratar AndiDog de enfoque para ver si hay algo cargado en absoluto.

+0

Tiene razón, la consola revela problemas. (OP actualizado.) –

+0

¿Tiene alguna posibilidad de incluir otra biblioteca que usa $, como prototipo, por ejemplo? – polarblau

-1

Probablemente haya olvidado incluir {{ form.media }} en su plantilla.

+0

¿Vio las etiquetas '

20

La adición de este a la parte superior de mi archivo .js lo fija:

var $ = django.jQuery; 

No estoy seguro de cómo eliminar el archivo jquery.init.js, dado que mi proyecto no contiene ninguna secuencia de comandos que usan $ para algo que no sea jQuery.

3

i resuelto este problema de esta manera, usted tiene que incluir jquery.init.js (a menudo sus jquery.init.js de administrador) en este archivo de complemento siguientes líneas:

var django = { 
    "jQuery": jQuery.noConflict(true) 
}; 
var jQuery = django.jQuery; 
var $=jQuery; 

yu tener en espacio de trabajo completo jquery y $. Para una mejor búsqueda de código, prefiero crear mi propio archivo jquery init en el proyecto.

Cuestiones relacionadas