Actualiser div en utilisant JQuery dans Django lors de l'utilisation du système de gabarit

Question

Je souhaite actualiser un django contenant des données de température. Les données sont récupérées toutes les 20 secondes. Jusqu'à présent, je l'ai réalisé cela en utilisant ces fonctions:

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

Et voici ma 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 a une balise include :

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

test.html juste contenir s une étiquette pour itérer dans le dictionnaire:

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

Le div est actualisé toutes les 10 secondes et me permet d'utiliser le système de template sans patcher avec js. Cependant, je reçois des appels répétés à '/ monitor-test', 3-4 en même temps après quelques minutes. Aussi, je me demandais s'il y avait une meilleure façon de faire cela tout en étant capable d'utiliser le système de template dans Django. Merci

Answer 1

La façon dont je contourne normalement les 3-4 demandes "simultanées" pour de telles situations est de mettre l'appel setTimeout() dans la fonction que je veux exécuter à plusieurs reprises.

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

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

qui le rend si chaque fois que la fonction refresh est appelée, elle se fixera automatiquement à nouveau appelé en 10 secondes. Une autre idée (si vous avez encore des problèmes) est de déplacer le setTimeout dans la fonction de succès dans l'appel AJAX:

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

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

Cette option pourrait être un peu peu précis si, pour une raison quelconque, l'appel AJAX ne parvient pas . Mais vous pouvez toujours contourner cela avec d'autres gestionnaires, je suppose ...

Une suggestion que j'ai (pas particulièrement liée à votre question) est de mettre toute la chose <table> dans le modèle que vous affichez et de renvoyer votre vue temperature. Donc, dans votre modèle principal:

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

et testing.html:

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

Quelque chose sur l'insertion d'une partie d'une table la façon dont vous avez actuellement il me donne envie de pleurer :) envoyer quelques octets plus sur le fil dans les appels AJAX ne devrait pas blesser quoi que ce soit.

Answer 2

NOTE: SI 'test.htm' a plus de contenu que celui sur la question, les .js seront:

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(); 
});