Dificultad con Django y jQuery (¿por qué $ no está definido en la aplicación de administración?)

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

Aquí hay un widget de 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 syntax estúpido o algo así?

Además, si algún otro script incluido en la página redefine $(document).ready , ¿tengo que preocuparme por eso? Supongo que las definiciones posteriores anularán las mías, por lo que es más seguro que las definiciones posteriores hagan algo como:

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

jQuery ya está incluido en la página cuando foowidget.js está.

Actualización : Basado en el enlace de @ lazerscience, intenté lo siguiente, pero aún falla como antes:

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

Actualización 2 : Curiosamente, cuando lo hago:

 alert($); 

Me sale “indefinido”. Esto sugiere que jQuery en realidad no está inicializado. Esto me confunde, porque el incluye:

     

¿El hecho de no poner mi script después de los scripts de jQuery garantiza 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? /* ... */ 

Me parece correcto.

Esto es desde la consola Firebug:

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

Actualización 4 : $ se define en todas las páginas de mi sitio de 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/] 

Puede usar $(document).ready() con la frecuencia que desee en una página . No redefine nada como lo llamas, pero la llamada de ready() agrega funciones que se llaman cuando “el documento está listo”. Para depurar su código por ejemplo. ¡use Firebug que le mostrará información más detallada sobre dónde se produce el error si hay alguno!

Agregar esto a la parte superior de mi archivo .js lo corrige:

 var $ = django.jQuery; 

No estoy seguro de cómo eliminar el archivo jquery.init.js, dado que mi proyecto no contiene ningún script que use $ para otra cosa que no sea jQuery.

Resolví este problema de esta manera, tiene que incluir jquery.init.js (a menudo es jquery.init.js de admin) en este archivo y agregue las siguientes líneas:

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

y tienes en todo el espacio de trabajo jquery y $. Para ver mejor el código, prefiero crear mi propio archivo jquery init en el proyecto.

Use la consola JS de Firebug o Web Inspector y escriba $ y / o jQuery . Esa es la forma más sencilla de averiguar si la biblioteca se ha cargado correctamente. En el improbable caso de que solo se haya definido jQuery, puede incluir su script en su propio ámbito:

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

Si no se define nada en la consola, lo más probable es que el problema esté en el archivo y probaría el enfoque de AndiDog para ver si hay algo cargado.

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 obtengas un 404 porque no definiste correctamente la URL del medio.

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

En django hay una razón para este problema cuando estás usando el complemento import_export. En ese caso, siga estos pasos:

  1. Cree una carpeta en el directorio de plantillas de administrador denominado import_export (templates / admin / import_export)
  2. Cree un archivo allí denominado base.html (templates / admin / import_export / base.html)
  3. escriba el siguiente archivo de código base.html.

    {% extiende “admin / import_export / base.html”%} {% load static%} {% block extrahead%} {{block.super}} static / admin / js / vendor / jquery / jquery.js static / admin / js / jquery.init.js
    {% endblock%}

Probablemente olvidaste incluir {{ form.media }} en tu plantilla.