Update a div using jQuery in Django using a template system

Question

I want to update a div tag in Django that contains temperature data. Data is retrieved every 20 seconds. So far, I have achieved this using the following 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> 

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

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

The div is updated every 10 seconds and allows me to use the template system without fixing 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 usually handle 3-4 “parallel” requests for such situations is to call setTimeout() inside the function that I want to run again.

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

This makes it so that every time the refresh function is called, it is automatically automatically called again after 10 seconds. Another idea (if you still have problems) is to move setTimeout to a success function in an AJAX call:

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

This option may be a bit sketchy if for some reason the AJAX call fails. But you can always get around this with other handlers, I suppose ...

One of the suggestions I have (not particularly related to your question) puts the whole <table> thing in the template you created and returns 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 a part of the table the way you currently have makes me want to cry :) Sending a few more bytes by wire in AJAX calls should not hurt anything.

Answer 2

NOTE. If "test.html" has more content than the one asking the question, .js will be:

 function refresh() { $.ajax({ url: '{% url monitor-test %}', success: function(data) { var dtr = $("#div_to_refresh", data); $('#div_to_refresh').html(dtr); } }); setTimeout("refresh()", 3000); } $(function(){ refresh(); });