0

我正在尝试为个人项目学习 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

但是，当我使用 Django 开发人员呈现页面时。服务器我没有像我包含的那样收到警报，并且情节没有呈现。我得到一个空白 div 到我指定的尺寸。当我在网络浏览器中实际查看页面的源代码时，它甚至没有显示我上面包含的绘图脚本。我究竟做错了什么？

4

1 回答 1

1

JS 在目标 div 被渲染之前执行。您可以在内联 JS 之前移动 div 或将 JS 调用包装在 document.ready 中：

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