title: django: Cannot import jQuery library to extended templates
body: <p>I have a <strong>base.html</strong> template which is inherited by some other template (i.e. <strong>user_profile.html</strong> page) like this: <code>{% extends "base.html" %}</code></p>
  
  <p>The problem is that jquery library is visible only for the <strong>base.html</strong> template. Code inside the <code>jQuery(document).ready(function())</code> which is placed inside the <strong>user_profile.html</strong> template does not run. </p>
  
  <p>If I place a <strong>second</strong> import tag of the jQuery library inside the <strong>user_profile.html</strong> template its own jQuery in the ready() function runs ok but then the <strong>base.html</strong> cannot see its own jQuery ready() code (although there is the initial import tag there too). </p>
  
  <p>This is what I use: <code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;</code></p>
  
  <p>(Hope that all the above makes sense.)</p>
  
  <p>What am I doing wrong?</p>
  
  <p>-EDIT-</p>
  
  <p>this is base.html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"&gt;
  &lt;head&gt;
      &lt;title&gt;{% block title %} {% endblock %}&lt;/title&gt;
  
      &lt;!-- remote apis first --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- then local --&gt;
      &lt;script src="/site_media/js/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          jQuery(document).ready(function(){
              alert('it works!'); //this alert popups normally
          });
      &lt;/script&gt;
  
      {% block external %} {% endblock %}
  &lt;/head&gt;
  &lt;body id="body"&gt;
      &lt;div id="wrap"&gt;
  
      &lt;!--  same stuff for all templates is going on here --&gt;
  
          &lt;div id="content"&gt;
              &lt;!-- main content area, different for each template--&gt;
              &lt;div class="main"&gt;
                   {% block maincontent %} {% endblock %}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- wrapper --&gt;
  
      {etc...}
  </code></pre>
  
  <p>This is user_profile.html</p>
  
  <pre><code>{% extends "base.html" %}
  {% load my_tags %}
  {% block title %}User Home{% endblock %}
  
  &lt;!-- following block is inside the &lt;head&gt; of the base.html --&gt;
  {% block external %} 
      &lt;link rel="stylesheet" href="/site_media/css/maps.css" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript"&gt;
          jQuery(document).ready(function(){
              alert('hi!'); // it is never reached!
          });
  
      &lt;/script&gt;
  {% endblock %}
  
  {% block maincontent %}
      &lt;!-- stuff is going on here --&gt;
  {% endblock %}
  </code></pre>