Django template inline jQuery not working
Alright so I solved it! My first problem was solved by user Paul Tomblin (sorry I don't know how to add you and I don't have enough rep to upvote your comment). I didn't realize that my subpage wouldn't include jQuery. For some reason I thought it would inherit that, but Django in this case doesn't work like that.
Secondly, I didn't add the $(document).ready(function(){}); So when the page loaded it wouldn't "run" or "intialize" the script. The document ready function will run once the document is ready to run the JavaScript as stated here: http://learn.jquery.com/using-jquery-core/document-ready/
And here is my updated code:
{% extends "subpage.django" %}
{# once jQuery works, can do deleteGraph ajax requests #}
{% block content %}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#dialog").hide();
$(".delete").click(function(){
alert("clicked!");
});
});
</script>
{% if graph %}
<h3> {{ graph.name }} </h3>
{% url 'graphImage' graph.id as the_graph %}
<img src="{{the_graph}}" alt="{{the_graph}}"/>
<a class="button delete" id="{{ graph.id }}" href="#">Delete</a>
<div id="dialog" title="Confirm delete">Are you sure?</div>
{% endif %}
{# need to add object.id to dialog in javascript #}
{% endblock %}
Kyle Calica-St
2020: Product Support Engineer @ Postman Software Developer @ RiskPulse 2019: Product Support Engineer @ Postman 2016-2019: Workday Application Development Engineer UC Davis graduate
Updated on June 14, 2022Comments
-
Kyle Calica-St almost 2 years
Trying to get inline jQuery in my template working so that I can use django url tags in AJAX calls later. But I can't get the javascript to work. In my subpage I extend my index page which has all my javascript and jQuery libraries.
{% extends "subpage.django" %} {% block content %} <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script> $("#dialog").hide(); $(".delete").click(function(){ alert("clicked!"); }); </script> {% if graph %} <h3> {{ graph.name }} </h3> {% url 'graphImage' graph.id as the_graph %} <img src="{{the_graph}}" alt="{{the_graph}}"/> <a class="button delete" id="{{ graph.id }}" href="#">Delete</a> <div id="dialog" title="Confirm delete">Are you sure?</div> {% endif %} {# need to add object.id to dialog in javascript #} {% endblock %}
Made some edits. Put script in block content so it shows now when showing the source code. Still doesnt work however. I now included the jQuery source using google apis. But the inline script still doesn't work. What is strange is that if I type it out in the console it works perfectly just not here! I know I am missing something!
-
Paul Tomblin about 9 yearsYou have to include jQuery on every page, not just the index page.
-
Kyle Calica-St about 9 yearsI see so I can't just extend from an index page that already calls it! Makes sense. Thank you so much!
-
Kyle Calica-St about 9 yearsYeah that worked! I can see it in the sources in the developer console. But the inline script still doesn't work. I'll edit the post to update the problem!
-
-
Apollo Data almost 6 yearsYou can include jQuery by extending a base page but without seeing that page we cannot be sure where you may have gone wrong.
-
Kyle Calica-St almost 6 yearsyup, used a base page to extend it. WHOA! 3 years later and I still remembered how to solve this basic problem haha. what a ride!