Flot not render in Django

Question

Я пытаюсь изучить Django и Javascript/jQuery для личного проекта. Я хочу построить некоторые данные с помощью Flot, и я пытаюсь получить тестовый график для рендеринга, но я, кажется, делаю это неправильно.

В моем base.html У меня есть следующее, чтобы включить jQuery и Flot в мой элемент head.

<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> 

В моей 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 

Однако, когда я отобразить страницу с помощью Dev Django. сервер. Я не получаю предупреждение, как и я, и сюжет не отображается. Я получаю пустой div для размеров, которые я указал. Когда я действительно смотрю на источник моей страницы в своем веб-браузере, он даже не показывает мой сценарий сюжета, который я включил выше. Что я делаю не так?

Answer 1

JS исполняется перед отображением целевого div. Вы можете перемещать DIV до встроенного JS или обернуть вызов JS в document.ready:

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