После Ajax запроса остается старый контент, как это можно исправить и что я делаю не так?

Question

[Кирилл Петров]

Новичок в JS, поэтому возя хочу добавить комментарий на сайте при помощи формы, возник следующий вопрос, почему такая ошибка: хочу обновить раздел комментарии при помощи AJAX-запроса, все окей - обновляется, но только выходит, что на одну страницу загружаются два шаблона(один старый, с текстом в форме комментария), а второй новый. Причем если вписывать новые данные в новую форму(которая загружается со вторым шаблоном), то все работает так как надо(комментарии отражаются только внизу, как и должно быть. и ничего лишнего не появляется) однако первая форма(базовая) вместе с контентом никуда не убирается. Получается что у меня на странице два поста, вместе с комментариями, как это можно исправить? Пробовал разные способы, и удалять, и скрывать, ничего не помогло.
Шаблон:

<div id="zone_comm">
{% for comment in articles.comments.all %}
        <div>{{ comment.created_date }}</div>
        <strong>{{ comment.author }}</strong>
        <p>{{ comment.text|linebreaks }}</p>
    </div>
{% empty %}
<p>Нет комментариев, будьте первым, кто оставит комментарий :)</p>
<button id='add'>
<p class="btn btn-default">Добавьте комментарий</p>
</button>
{% endfor %}

JS

$(document).ready(function(){
        var $myForm = $('.my-ajax-form1')
        $myForm.submit(function(event){
            event.preventDefault();
            var $formData = $(this).serialize();
            var $thisURL = $myForm.attr('data-url') || window.location.href; 
            $.ajax({
                method: "POST",
                url: $thisURL,
                data: $formData,
                success: handleFormSuccess,
                error: handleFormError,
            })
        })
        
    
        function handleFormSuccess(data, textStatus, jqXHR){
            console.log(data)
            console.log(textStatus)
            console.log(jqXHR)
            $('#zone_comm').html(data);
        }
    
        function handleFormError(jqXHR, textStatus, errorThrown){
            console.log(jqXHR)
            console.log(textStatus)
            console.log(errorThrown)
        }
    })

Хотелось бы узнать, где я ошибаюсь и на что стоит обратить внимание

Answer 1

[Antony Tkachenko]

А что у вас возвращается в ответе сервера?
Полная html-версия страницы?
Подозреваю что нужно что-то вроде

var comments = $(data).find('#zone_comm').html();
$('#zone_comm').html(comments);

Comments

[Кирилл Петров]

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

Answer 2

[Алексей Черемисин]

Ух, типичная ошибка, у вас смешался рендеринг на стороне сервера (из шаблона) и рендеринг на стороне браузера (javascript).
Самый простой выход из положения - держать id записей, и обновлять (и добавлять ) их через ajax.

<div id="zone_comm">
{% for comment in articles.comments.all %}
  <div id="comment-{{ comment.id }}">
        <div>{{ comment.created_date }}</div>
        <strong>{{ comment.author }}</strong>
        <p>{{ comment.text|linebreaks }}</p>
  </div>
{% endfor %}
</div>

И JS (обратите внимание, шаблон сделан на основе литералов ECMA2015 - в обратных кавычках! )

....
function handleFormSuccess(data, textStatus, jqXHR){
            $( "#zone_comm" ).append(
`
  <div id="comment-${data.id }">
        <div>${data.created_date}</div>
        <strong>${data.author}</strong>
        <p>${data.text}</p>
  </div>
`
            );
        }

Или, вообще добалять их полностью через ajax...