Question

I am attempting to learn Django and Javascript/jQuery for a personal project. I want to plot some data using Flot and I am attempting to get a test plot to render but I seem to be doing it wrong.

In my base.html I have the following to include both jQuery and Flot in my head element.

<script src="/site_media/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/site_media/jquery.flot.min.js" type="text/javascript"></script>

In my inherit.html:

{% extends 'base.html' %}

<script type="text/javascript">
alert('Im running!');
$.plot($("#flot-test"), [ [[0, 0], [1, 1]] ], { yaxis: {max: 1 } });
</script>
{% block title %}Detail View for {{ sched_name }}{% endblock %}

{% block content %}
<div id="status_bar">
    <a href="/view_schedules/">{{ user.username }}'s Gradebooks</a> / <a href="/view_schedules/{{ schedule_slug }}/">{{ sched_name }}</a>
</div>

<div id="flot-test" style="width:600px;height:300px">
</div>

The rest concatenated 

However when I render the page using the Django dev. server I get no alert like I included and the plot does not render. I get a blank div to the dimensions I have specified. When I actually look at the source of my page in my web browser it does not even show my plot script that I have included above. What am I doing wrong?

Answer 1

The JS is executing before the target div has been rendered. You can move the div before the inline JS or wrap the JS call in a document.ready:

<script type="text/javascript">
$(document).ready(function(){ 
    alert('Im running!');
    $.plot($("#flot-test"), [ [[0, 0], [1, 1]] ], { yaxis: {max: 1 } });
});