Refresh div using JQuery in Django while using the template system

Question

I want to refresh a div tag in Django that contains temperature data. The data is fetched every 20 seconds. So far I have achieved this using these functions:

function refresh() {
$.ajax({
  url: '{% url monitor-test %}',
  success: function(data) {
  $('#test').html(data);
  }
});
};
$(function(){
    refresh();
    var int = setInterval("refresh()", 10000);
});

And this is my urls.py:

urlpatterns += patterns('toolbox.monitor.views',
    url(r'^monitor-test/$', 'temperature', name="monitor-test"),
    url(r'^monitor/$', 'test', name="monitor"),
)

views.py:

def temperature(request):
  temperature_dict = {}
  for filter_device in TemperatureDevices.objects.all():
    get_objects = TemperatureData.objects.filter(Device=filter_device)
    current_object = get_objects.latest('Date')
    current_data = current_object.Data
    temperature_dict[filter_device] = current_data 
  return render_to_response('temp.html', {'temperature': temperature_dict})

temp.html has an include tag:

<table id="test"><tbody>
<tr>
{% include "testing.html" %}
</tr>
</tbody></table>

testing.html just contains a for tag to iterate through the dictionary:

{% for label, value in temperature.items %}
      <td >{{ label }}</td>
      <td>{{ value }}</td>
{% endfor %}

The div is refreshed every 10 seconds and allows me to use the template system without patching it with js. However, I get repeated calls to '/monitor-test', 3-4 at the same time after a couple of minutes. Also, I was wondering if there is a better way to do this while being able to use the template system in Django. Thanks.

Answer 1

The way I normally get around the 3-4 "concurrent" requests for such situations is to put the setTimeout() call inside the function I want to run repeatedly.

function refresh() {
    $.ajax({
        url: '{% url monitor-test %}',
        success: function(data) {
            $('#test').html(data);
        }
    });
    setTimeout(refresh, 10000);
}

$(function(){
    refresh();
});

That makes it so every time the refresh function is called, it will automatically set itself to be called again in 10 seconds. Another idea (if you still have problems) is to move the setTimeout into the success function in the AJAX call:

function refresh() {
    $.ajax({
        url: '{% url monitor-test %}',
        success: function(data) {
            $('#test').html(data);
            setTimeout(refresh, 10000);
        }
        
    });
}

$(function(){
    refresh();
});

That option might be a little bit sketchy if, for whatever reason, the AJAX call does not succeed. But you can always get around that with other handlers, I suppose...

One suggestion I have (not particularly related to your question) is putting the whole <table> thing in the template that you render and return your temperature view. So, in your main template:

<div id="test">
{% include 'testing.html' %}
</div>

and in testing.html:

<table><tr>
{% for label, value in temperature.items %}
    <td>{{ label }}</td>
    <td>{{ value }}</td>
{% endfor %}
</tr></table>

Something about inserting part of a table the way you currently have it makes me want to cry :) Sending a few more bytes over the wire in AJAX calls shouldn't hurt anything.