2011-01-17 18 views
8

Minęło trochę czasu odkąd pracowałem z jQuery; Myślę, że robię głupi błąd.

Oto widget Django:

class FooWidget(Widget): 

    # ... 

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

Oto plik js:

alert("bar"); 

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

alert("foo"); 

Jedynym alert() że pożary to pierwszy. Czy mam głupi błąd w składni czy coś takiego?

Również, jeśli jakiś inny zawarty na stronie skrypt ponownie definiuje $(document).ready, czy muszę się tym martwić? Zgaduję, że kolejne definicje zastąpi kopalni, więc jest to bezpieczniejsze dla kolejnych definicje zrobić coś takiego:

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

jQuery jest już zawarte na stronie do czasu foowidget.js jest.

Aktualizacja: Na podstawie @ lazerscience za linkiem, próbowałem następujące zamiast, ale nadal nie tak jak wcześniej:

alert("bar"); 

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

alert("foo"); 

Update 2: Co ciekawe, kiedy zrobić:

alert($); 

Otrzymuję "niezdefiniowany". Sugeruje to, że jQuery w rzeczywistości nie został zainicjowany. To mnie niepokoi, bo <head> obejmuje:

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

Nie oddanie mój skrypt po skrypty jQuery zapewnić $ zostaną zdefiniowane?

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

Wygląda poprawne do mnie.

To z konsoli Firebug:

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

Update 4: $ jest określona na całej stronie mojej strony Django wyjątkiem aplikacji administratora. Nieparzysta ...

Aktualizacja 5: To jest interesujące.

jQuery.init.js:

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

Z konsoli:

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

Czy używasz narzędzi programistycznych, takich jak Firebug lub Narzędzia dla programistów Chrome? –

+0

Powinieneś potwierdzić, że znacznik skryptu /media/js/jquery.min.js faktycznie zwraca bibliotekę jquery. – Andrew

+0

Spojrzałem na plik. Wygląda na to, że jest to biblioteka jQuery, chociaż nie zrobiłem różnicy. –

Odpowiedz

1

Można użyć $(document).ready()as often as you want to on one page.Nie oznacza to, że zmienia się ona tak, jak ją nazywasz, ale wywołanie ready() dodaje funkcje, które są wywoływane, gdy "dokument jest gotowy". Aby debugować twój kod, np. użyj Firebug, który pokaże ci więcej szczegółowych informacji o tym, gdzie wystąpi błąd, jeśli coś jest!

+0

Firebug narzeka, że ​​$ jest niezdefiniowane (patrz wyżej) –

+13

Jeśli używasz jQuery ładowanego przez django, zapisz swój kod przez '(function ($) { // twój kod tutaj ... }) (django.jQuery); '! –

0

W przeglądarce Firefox wyświetl kod źródłowy strony, a następnie kliknij link "/media/js/jquery.min.js", aby sprawdzić, czy został załadowany. Najprawdopodobniej otrzymujesz 404, ponieważ nie zdefiniowałeś poprawnie adresu URL multimediów.

Do tego celu można również użyć serwera programistycznego, który wyświetli wszystkie żądania i zwrócony kod statusu HTTP.

+0

Sprawdziłem, a to nie jest 404. Jest to kod jQuery, tak jak zaktualizowałem powyżej. –

3

Skorzystaj z konsoli JS Firebug lub Web Inspector i wpisz $ i/lub jQuery. To najprostszy sposób sprawdzenia, czy biblioteka została poprawnie załadowana. W mało prawdopodobnym przypadku, że jQuery jest zdefiniowana tylko można zawinąć skryptu w jego własnym zakresie:

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

Jeśli nic nie jest zdefiniowane w konsoli, problem jest najprawdopodobniej z plikiem, a ja staram AndiDog użytkownika podejście, aby sprawdzić, czy w ogóle jest coś załadowanego.

+0

Masz rację, konsola nie ujawnia problemów. (OP zaktualizowany.) –

+0

Czy przypadkiem nie używasz innej biblioteki, która używa $, na przykład prototypu? – polarblau

-1

Prawdopodobnie zapomniałeś dodać {{ form.media }} do swojego szablonu.

+0

Czy w OP zobaczyłeś znaczniki '

20

Dodając to do góry mój plik .js rozwiązuje go:

var $ = django.jQuery; 

Nie jestem pewien, w jaki sposób usunąć plik jquery.init.js, biorąc pod uwagę, że mój projekt nie zawiera żadnych skryptów które używają $ dla czegoś innego niż jQuery.

3

i rozwiązał ten problem na tej drodze, trzeba to jquery.init.js (często jego jquery.init.js od admin) w tym pliku dodaj następujące linie:

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

i u mają w całe jQuery obszaru roboczego i $. Aby lepiej wyglądać kod, wolę utworzyć własny plik inicjujący jquery w projekcie.

Powiązane problemy