Geek Answers Handbook

Difficulty with Django and jQuery (why $ undefined in admin application?)

Some time has passed since I worked with jQuery; I think I'm making a stupid mistake.

Here is the Django widget:

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

Here is the .js file:

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

The only alert() that fires is the first. Am I having a dumb syntax error or something else?

Also, if any other included script on the redefines $(document).ready page, do I need to worry about this? I assume that subsequent definitions will override mine, so for subsequent definitions it is safer to do something like:

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

jQuery is already included in the page at the time of foowidget.js .

Update . Based on the @lazerscience link, I tried the following instead, but it still doesn't work like this:

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

Update 2 : Curious when I do this:

 alert($);

I get "undefined". This suggests that jQuery is not actually initialized. This bothers me because <head> includes:

 <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>

Does my script not put after jQuery scripts guarantee that $ will be defined?

Update 3 : from 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? /* ... */

Looks like me.

This is from the Firebug console:

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

Update 4 : $ defined on the whole page of my Django site, except for the admin application. Strange ...

Update 5 . It is interesting.

jQuery.init.js

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

On the console:

 >>> $ anonymous() >>> django Object {} >>> django.jQuery function() >>> django.jQuery('a') [a /admin/p..._change/, a /admin/logout/, a ../../, a ../, a.addlink add/]
+11
javascript python django
source share
7 answers

You can use $(document).ready() as many times as you want on one page . It does not override anything as you call it, but calling ready() adds functions that are called when the "document is ready." For example, to debug code. use Firebug, which will show you more details about where the error occurs, if any!

+1
source share

Adding this to the top of my .js file fixes it:

 var $ = django.jQuery;

I am not sure how to delete the jquery.init.js file, given that my project does not contain scripts that use $ for something other than jQuery.

+26
source share

I solved this problem along this way, you should include jquery.init.js (often its jquery.init.js from admin), add the following lines to this file:

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

and u have overall jquery workspace and $. For a better code search, I prefer to create my own jquery initialization file in the project.

+4
source share

Use the Firebug console or Web Inspector JS and enter $ and / or jQuery . This is the easiest way to find out if the library is loaded correctly. In the unlikely event that only jQuery is defined, you can wrap your script in your own scope:

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

If nothing is defined on the console, the problem will most likely be related to the file, and I would try the AndiDog approach to see if there is anything downloaded at all.

+3
source share

In Firefox, view the source code of the page, then click on the link /media/js/jquery.min.js to see if it is loaded. Most likely you get 404 because you did not correctly define the media URL.

You can also use the development server for this purpose, it will show you all the requests and returns an HTTP status code.

0
source share

In django, one of the causes of this problem is when using the import_export plugin. In this case, do the following:

  1. Create a folder in the admin template directory named import_export (templates / admin / import_export)
  2. Create a file called base.html there (templates / admin / import_export / base.html)

  3. enter the code base.html file below.

    {% extends "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%}

0
source share

You probably forgot to include {{ form.media }} in your template.

-one
source share

Source: https://habr.com/ru/post/651141/

More articles:


All Articles