title: Difficulty with Django and jQuery (why is $ undefined in the admin app?)
body: <p>It's been a while since I worked with jQuery; I think I'm making a stupid mistake.</p>
  
  <p>Here is a Django widget:</p>
  
  <pre><code>class FooWidget(Widget):
  
      # ...
  
      class Media:
          js = ('js/foowidget.js',)
  </code></pre>
  
  <p>Here is the .js file:</p>
  
  <pre><code>alert("bar");
  
  $(document).ready(function() {
    alert("omfg");
    $('.foo-widget').click(function() {
      alert("hi");
      return false;
    });
  });
  
  alert("foo");
  </code></pre>
  
  <p>The only <code>alert()</code> that fires is the first. Do I have a stupid syntax error or something?</p>
  
  <p>Also, if some other included script on the page redefines <code>$(document).ready</code>, do I have to worry about it? I'm guessing that subsequent definitions will override mine, so it's safer for subsequent definitions to do something like:</p>
  
  <pre><code>$(document).ready(function() {
      document.ready()
      // real stuff
  });
  </code></pre>
  
  <p>jQuery is already included in the page by the time <code>foowidget.js</code> is.</p>
  
  <p><strong>Update</strong>: Based on @lazerscience's link, I tried the following instead, but it still fails just as before:</p>
  
  <pre><code>alert("bar");
  
  $(function() {
    alert("omfg");
    $(".set-widget").click(function() {
      alert("hi");
      return false;
    });
  });
  
  alert("foo");
  </code></pre>
  
  <p><strong>Update 2</strong>: Curiously, when I do:</p>
  
  <pre><code>alert($);
  </code></pre>
  
  <p>I get "undefined". This suggests that jQuery is actually not initialized. This confuses me, because the <code>&lt;head&gt;</code> includes:</p>
  
  <pre><code>&lt;script type="text/javascript" src="/media/js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/media/js/jquery.init.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/media/js/actions.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/static/js/foowidget.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Doesn't putting my script after the jQuery scripts ensure that <code>$</code> will be defined?</p>
  
  <p><strong>Update 3</strong>: from jquery.min.js:</p>
  
  <pre><code>/*!
   * 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&amp;&amp;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&amp;&amp;f&amp;&amp;c.isFunction(d);for(o=0;o&lt;i;o++)e(a[o],b,f?d.call(a[o],o,e(a[o],b)):d,j);return a}return i? /* ... */
  </code></pre>
  
  <p>Looks correct to me.</p>
  
  <p>This is from the Firebug console:</p>
  
  <pre><code>Error: $ is not a function
  [Break On This Error] $(function() {
  foowidget.js (line 5)
  &gt;&gt;&gt; $
  anonymous()
  &gt;&gt;&gt; jQuery
  undefined
  &gt;&gt;&gt; $('a')
  null
  &gt;&gt;&gt; $(document)
  null
  </code></pre>
  
  <p><strong>Update 4</strong>: <code>$</code> is defined on all page of my Django site except the admin app. Odd...</p>
  
  <p><strong>Update 5</strong>: This is interesting.</p>
  
  <p><strong>jQuery.init.js</strong>:</p>
  
  <pre><code>// Puts the included jQuery into our own namespace
  var django = {
   "jQuery": jQuery.noConflict(true)
  }; 
  </code></pre>
  
  <p>From the console:</p>
  
  <pre><code>&gt;&gt;&gt; $
  anonymous()
  &gt;&gt;&gt; django
  Object {}
  &gt;&gt;&gt; django.jQuery
  function()
  &gt;&gt;&gt; django.jQuery('a')
  [a /admin/p..._change/, a /admin/logout/, a ../../, a ../, a.addlink add/]
  </code></pre>