CODEWITHSUNDEEP
javascriptjquerydjangojinja2
death and gravity
death and gravity

Reputation: 629

Django - Best way to refresh a div in a Template using Javascript?

I want to refresh the <div> that my google chart is embedded in every 30 seconds to display updates to the data in the model that it is using.

here is the template:

metrics.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 %}

I have been using this to refresh the entire page: :

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

As you can imagine it looks really bad when the entire page reloads every 5 seconds, is there a more ecstatically pleasing way to reload the <div>'s that contain jinja2 variables?

Upvotes: 2

Views: 2147

Answers (1)

death and gravity
death and gravity

Reputation: 629

I solved my problem using Jquery .load().

setInterval(function () {

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

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

I am using this with Django so I had to create a view to create the "url-for-source-content" and then reverence that in my url patterns for that app.

Upvotes: 1

Related Questions