Получаю дублирующие записи при обновлении страницы через ajax?

Question

[Шамуэй]

Хочу добавить моментальное обновление комментариев в блоге, для этого использую ajax

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src=" http://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js "></script>

  <script>  
    
 function refresh() {
  $.ajax({
  url: "/blog/{{post.id}}",
  success: function(data) {
    $('.comment').html(data);
  }
 });
};
$(document).ready(function ($) {
  refresh();
  var int = setInterval("refresh()", 1);
});
</script>

пробую обновить этот кусок шаблона

<div id="codeajax">
    {% for comment in comments %}
        <div class="comment">
            <p id="inf"> {{ comment.name }} {{ comment.created }}</p>
            {{ comment.body|linebreaks }}
            </div>
        </div>
    {% empty %}
        <p>There are no comments yet.</p>
    {% endfor %}

Всё работает, но список комментариев и форма для их ввода выводится дважды как это можно убрать?

Comments

[Абдулла Мурсалов]

id элемента должен быть уникален. прописывать id в цикле не имеет смысла

Answer 1

[Павел Аксенов]

Тут происходит такая ситуация, к примеру после загрузки страницы есть 2 коммента.
После чего ajax возвращает, как я понимаю, те же 2 коммента или больше(возьмем случай с 2-мя). Дальше происходит $('.comment').html(data);. Вот тут находятся 2 блока с классом ".comment" и в каждый вставляются те данные которые пришли от сервера, соответственно в первый блок добавится 2 записи и во второй блок 2 записи. Вот тут и дублирование.
Не знаю, что отдает сервер, по-этому сделаю предположу:
- сервер отдает

<div class="comment">
    <p id="inf"> {{ comment.name }} {{ comment.created }}</p>
    {{ comment.body|linebreaks }}
</div>

тогда надо заменить $('.comment').html(data); на

$('.comment').remove();
$('#codeajax').append(data);

И еще.
Косяк с версткой, возможно в нем основная проблема, так как в цикле закрывается div#codeajax.

Answer 2

[Евгений Мальцев]

А зачем {{ comment.name }} {{ comment.created }} ? Вы же выводите все через AJAX