Сложности с Django и jQuery (почему $ undefined в приложении администратора?) - PullRequest
11 голосов
/ 17 января 2011

Прошло много времени с тех пор, как я работал с jQuery;Я думаю, что делаю глупую ошибку.

Вот виджет Django:

class FooWidget(Widget):

    # ...

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

Вот файл .js:

alert("bar");

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

alert("foo");

Единственный alert() который стреляет первым.Есть ли у меня глупая синтаксическая ошибка или что-то в этом роде?

Кроме того, если какой-то другой включенный скрипт на странице переопределяет $(document).ready, должен ли я беспокоиться об этом?Я предполагаю, что последующие определения переопределят мои, поэтому для последующих определений будет безопаснее сделать что-то вроде:

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

jQuery уже включен в страницу к тому времени, когда foowidget.js.

Обновление : Основываясь на ссылке @ lazerscience, я попробовал следующее вместо этого, но все равно не получается, как и раньше:

alert("bar");

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

alert("foo");

Обновление 2 : Любопытно,когда я делаю:

alert($);

я получаю "неопределенный".Это говорит о том, что jQuery на самом деле не инициализирован.Это смущает меня, потому что <head> включает в себя:

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

Не ставит ли мой скрипт после сценариев jQuery гарантию того, что $ будет определено?

Обновление 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? /* ... */

Выглядит правильно для меня.

Это с консоли Firebug:

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

Обновление 4 : $ определено на всех страницах моего сайта Django, кроме приложения администратора.Странно ...

Обновление 5 : Это интересно.

jQuery.init.js :

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

С консоли:

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

Ответы [ 7 ]

26 голосов
/ 17 января 2011

Добавление этого в начало моего файла .js исправляет это:

var $ = django.jQuery;

Я не уверен, как удалить файл jquery.init.js, учитывая, что мой проект не содержит сценариев, которые используют $ для чего-то другого, кроме jQuery.

7 голосов
/ 21 июля 2012

Я решил эту проблему таким образом, вы должны включить в этот файл jquery.init.js (часто его jquery.init.js от администратора) и добавить следующие строки:

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

и у вас есть во всем рабочем пространстве jquery и $. Для лучшего поиска кода я предпочитаю создать свой собственный файл инициализации jquery в проекте.

3 голосов
/ 17 января 2011

Используйте консоль Firebug или Web Inspector JS и введите $ и / или jQuery. Это самый простой способ узнать, правильно ли загружена библиотека. В маловероятном случае, когда определен только jQuery, вы можете заключить свой скрипт в его собственную область:

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

Если на консоли ничего не определено, проблема, скорее всего, связана с файлом, и я бы попробовал подход AndiDog, чтобы посмотреть, есть ли что-нибудь загруженное.

1 голос
/ 17 января 2011

Вы можете использовать $(document).ready() столько раз, сколько хотите на одной странице .Он не переопределяет ничего, как вы его называете, но вызов ready() добавляет функции, которые вызываются, когда "документ готов".Для отладки вашего кода, например.используйте Firebug, который покажет вам более подробную информацию о том, где происходит ошибка, если она есть!

0 голосов
/ 05 февраля 2019

В django одна из причин этой проблемы при использовании плагина import_export.В этом случае выполните следующие действия -

  1. Создайте папку в каталоге шаблонов администратора с именем import_export (templates / admin / import_export)
  2. Создайте там файл с именем base.html (templates / admin/import_export/base.html)
  3. введите приведенный ниже код base.html file.

    {% 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 голосов
/ 17 января 2011

Вы, вероятно, забыли включить {{ form.media }} в свой шаблон.

0 голосов
/ 17 января 2011

В Firefox просмотрите исходный код страницы, затем нажмите ссылку "/media/js/jquery.min.js", чтобы увидеть, загружена ли она. Скорее всего, вы получаете 404, потому что вы не правильно определили медиа-URL.

Вы также можете использовать сервер разработки для этой цели, он покажет вам все запросы и возвращенный код состояния HTTP.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...