我想刷新<div>
我的谷歌图表每 30 秒嵌入一次,以显示其正在使用的模型中数据的更新。
这是模板:
指标.html
{% extends 'metrics/metrics_header.html' %}
{% block content %}
<h1>Metrics</h1>
<p>Submitted = {{ submitted }},
Conforming = {{ conforming }}
Transcoding = {{ transcoding }}
Complete = {{ complete }}
Error = {{ error }}
</p>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Job State', 'Jobs', { role: "style" }],
['Submitted', {{ submitted }},'blue'],
['Conforming', {{ conforming }},'purple'],
['Transcoding', {{ transcoding }},'yellow'],
['Complete', {{ complete }},'green'],
['Error', {{ error }},'red']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Total Number of Jobs Processed",
bar: {groupWidth: "100%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
<div id="columnchart_values" style="width: 100%; height:600px;"></div>
{% endblock %}
我一直用它来刷新整个页面::
<script>
setTimeout(function(){
window.location.reload(true);
}, 5000);
</script>
正如你所想象的那样,当整个页面每 5 秒重新加载一次时,它看起来真的很糟糕,是否有一种更令人欣喜若狂的方式来重新加载 <div>
包含 jinja2 变量吗?
最佳答案
我使用 Jquery .load()
解决了我的问题。
setInterval(function () {
$("#div-you-want-to-reload").load("url-for-source-content");
}, 1000); // This reloads the <div> every 1 second.
我将其与 Django 一起使用,因此我必须创建一个 View 来创建“url-for-source-content”
,然后在该应用程序的 url 模式中尊重它。
关于javascript - Django - 使用 Javascript 刷新模板中的 div 的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42557142/