2017-03-02 13 views
1

<div> Googleのグラフが30秒ごとに埋め込まれるように更新して、使用しているモデルのデータの更新を表示したいとします。 :Django - Javascriptを使用してテンプレートのdivをリフレッシュするには?

<script> 
    setTimeout(function(){ 
     window.location.reload(true); 
    }, 5000); 
</script> 

は、あなたが想像できるように、それは本当に悪いになります。私は、ページ全体をリフレッシュするためにこれを使用している

{% 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 %} 

metrics.html:ここ

はテンプレートですページ全体が5秒ごとにリロードされるとき、jinja2変数を含む <div>をリロードする方がもっと喜ばしい方法がありますか?

答えて

0

Jquery​​を使用して問題を解決しました。

setInterval(function() { 

    $("#div-you-want-to-reload").load("url-for-source-content"); 

}, 1000); // This reloads the <div> every 1 second. 

私はので、私は"url-for-source-content"を作成し、そのアプリのための私のURLパターンにそれを尊敬するビューを作成する必要がありましたジャンゴでこれを使用しています。