Обновите div, используя JQuery в Django при использовании системы шаблонов

Question

Я хочу обновить тег div в Django, который содержит данные о температуре. Данные выбираются каждые 20 секунд. До сих пор я добился этого с помощью этих функций:

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

А это мой 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 имеет тег включения:

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

testing.html просто содержит тег for для перебора словаря:

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

Div обновляется каждые 10 секунд и позволяет мне использовать систему шаблонов, не устанавливая патч с js. Тем не менее, я получаю повторные звонки на «/ monitor-test», 3-4 одновременно через пару минут. Кроме того, мне было интересно, есть ли лучший способ сделать это при возможности использования системы шаблонов в Django. Спасибо.

Answer 1

Обычно я получаю 3-4 параллельных запроса в таких ситуациях, чтобы поместить вызов setTimeout() в функцию, которую я хочу запустить несколько раз.

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

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

Это делает его таким, что каждый раз, когда вызывается функция refresh, он автоматически настраивается на повторный вызов через 10 секунд. Другая идея (если у вас все еще есть проблемы) состоит в том, чтобы переместить setTimeout в функцию успеха в вызове AJAX:

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

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

Эта опция может быть немного неуклюжей, если по какой-либо причине вызов AJAX не будет успешным. Но вы всегда можете обойти это с другими обработчиками, я полагаю ...

У меня есть одно предложение (не связанное с вашим вопросом) - поместить в шаблон, который вы отображаете, целую вещь <table> и вернуть ваше представление temperature. Итак, в вашем основном шаблоне:

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

и testing.html:

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

Что-то из-за вставки части таблицы, как у вас сейчас, заставляет меня плакать :) Отправка еще нескольких байтов по проводам в вызовах AJAX не должна повредить.

Answer 2

ПРИМЕЧАНИЕ. Если в файле 'testing.html' больше, чем в вопросе, файл .js будет:

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