Databases
StackOverflow2013
Postsdbo
POdjango: Cannot import jQuery library to extended templates
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdjango: Cannot import jQuery library to extended templates
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload