gordon_shamway
@gordon_shamway

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

Хочу добавить моментальное обновление комментариев в блоге, для этого использую 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 %}

Всё работает, но список комментариев и форма для их ввода выводится дважды как это можно убрать?
  • Вопрос задан
  • 322 просмотра
Решения вопроса 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.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@hellpirat
Full stack developer (Python/Django, React.js)
А зачем {{ comment.name }} {{ comment.created }} ? Вы же выводите все через AJAX
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы