javascript - Django template inline jQuery not working - Stack Overflow

admin管理员组

文章数量:1344240

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='.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!

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./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!

• javascript
• jquery
• python
• django
• django-templates

Share Improve this question Follow edited Feb 17, 2015 at 19:12 Kyle Calica-St asked Jan 29, 2015 at 21:15 Kyle Calica-StKyle Calica-St 2,96366 gold badges3232 silver badges6464 bronze badges 3

• 3 You have to include jQuery on every page, not just the index page. – Paul Tomblin Commented Feb 13, 2015 at 22:29
• I see so I can't just extend from an index page that already calls it! Makes sense. Thank you so much! – Kyle Calica-St Commented Feb 14, 2015 at 18:31
• Yeah 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! – Kyle Calica-St Commented Feb 17, 2015 at 19:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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 ment). 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./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./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  %}

<script type="text/javascript" src="{% static 'mag/js/jquery-ui.js'%}"></script>

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 9000,
        values: [ 50, 6000 ],
        slide: function( event, ui ) {  
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });

    $( "#amount" ).val( "$" + 
            $( "#slider-range" ).slider( "values", 0 ) + " - $" 
            + $( "#slider-range" ).slider( "values", 1 ) );

    });//]]>  

</script>

本文标签： javascriptDjango template inline jQuery not workingStack Overflow