JQuery - autorefresh часть страницы

Question

В моем проекте Django у меня есть страница, на которой отображаются все экземпляры конкретной модели. Я хочу автоматически обновлять страницу каждые несколько секунд, но только обновлять соответствующую часть страницы.

Я опишу каждую часть. Во-первых - у меня есть представление Django. В своей простейшей форме это выглядит

class MyListView(ListView): 
    lookup_field = 'uuid' 
    model = Foo 
    template_name = 'mylist.html' 

    def get_queryset(self):     
     return list(Foo.objects.all()) # finds all my objects from DB 

    def get_context_data(self, **kwargs): 
     objects = self.get_queryset() 
     context = super(MyListView, self).get_context_data(**kwargs) 
     context['foos'] = objects  # this gets passed to html page 
     return context 

Так он находит все Foo объекты из базы данных и возвращает его в HTML.

На странице html отображается таблица, в которой каждая запись представляет собой строку. Кроме того, флажок установлен в начале каждой строки. Как это

<table id="content"> 
    <thead> 
     <tr> 
      <th><input type="checkbox" id="chckHead"/></th> 
      <th>UUID</th> 
      <th>Attribute1</th> 
      <th>Attribute2</th> 
     </tr> 
    </thead> 
    <tbody> 
    {% for item in foos %} 
     <tr id="{{ item.uuid }}"> 
      <td> 
      <input type="checkbox" name="checkboxlist" class="chcktbl" /> 
      </td> 
      <td><code>{{ item.uuid }}</code></td> 
      <td>{{ item.attribute1 }}</td> 
      <td>{{ item.attribute2 }}</td> 
     </tr> 
    {% endfor %} 
    </tbody> 
</table> 

Теперь, некоторые из атрибутов Foo моделей могут обновляться в фоновом режиме, поэтому я хочу, чтобы как-то обновить страницу периодически с новыми данными.

Я сделал это в JavaScript, как этот

function setup() { 
     setTimeout("refreshPage();", 5000); 
    } 

    function refreshPage() { 
     window.location = location.href; 
    } 


    $(document).ready(setup); 

Так каждые 5 секунд, JS назовет refreshPage(), и моя страница получает обновляется. Если бы база данных была изменена за кулисами, моя страница отразила бы ее.

Проблема с вышесказанным заключается в том, что она обновляет всю страницу, в которую включен флажок. Поэтому, если я уже выбрал флажок, обновление обновит его до исходного состояния («не проверено»).

Итак, каков правильный способ решить эту проблему?

Answer 1

Просто очень высокий уровень:

window.location, что вы добавляете собирается сбросить всю страницу. К этому времени вы уже поняли это. То, что вы ищете, можно обработать с помощью частичной части страницы или с помощью конечной точки REST и повторного ее возврата через шаблон.

Вот шаги, которые вам понадобятся: refreshPage вместо преформы.

1. Сохранить от любых значений, которые вы считаете важные
2. Отправить АЯКС запрос, чтобы получить либо частичный или JSON
3. Рендер этой новой информации на страницу
4. Отложите значение от одного шага по значения, сделанные на этапе 3

Скорее всего, вам захочется ждать обновления refreshPage, если они в настоящее время редактируют область (экономит ваши шаги 1 и 4). Это может быть выбор, против которого вы уже голосовали.

Я надеюсь, что это поможет, это очень нетехнический ответ, но я не уверен, что могу дать вам очень конкретный ответ, не зная МНОГО больше о вашем проекте.