After the Ajax request is old content, how can I fix it and what am I doing wrong?

New to JS, so fumbling I want to add a comment on the website using the form, there appeared the following question, why this error: I want to update the comments section with the help of AJAX request, everything is okay - updated, but it turns out that one page load two templates(one old, with the text in the comment form), and the second new one. And if you enter new data into a new form(which is loaded with the second template), then everything works as it should(comments recorded only at the bottom, as it should be. and nothing more appears) however, the first form(base) along with the content will not retract. It turns out that on my page two posts, together with comments how can I fix it? Tried different ways, and to remove and to hide, nothing helped.
Template:
<div id="zone_comm">
{% for comment in articles.comments.all %}
 the <div>{{ comment.created_date }}</div>
 of <strong>{{ comment.author }}</strong>
 <p>{{ comment.text|linebreaks }}</p>
</div>
{% empty %}
<p>No reviews, be the first to leave a comment :)</p>
<button id='add'>
<p class="btn btn-default">Add a comment</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,
})
})


 handleFormSuccess function(data, textStatus, jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
$('#zone_comm').html(data);
}

 handleFormError function(jqXHR, textStatus, errorThrown){
console.log(jqXHR)
console.log(textStatus)
console.log(errorThrown)
}
 })

I would like to know where I'm wrong and what you should pay attention
March 12th 20 at 08:01
2 answers
March 12th 20 at 08:03
What have you returned in the server response?
Full html version of the page?
I suspect that you need something like
var comments = $(data).find('#zone_comm').html();
$('#zone_comm').html(comments);
in this case, only the first div, all subsequent are ignored - Misty.Kulas21 commented on March 12th 20 at 08:06
March 12th 20 at 08:05
Wow, that's a common mistake, you mixed up the rendering on the server side (from a template) and render on the browser side (javascript).
The easiest way out is to keep the id of the records, and update (and add ) them via ajax.
<div id="zone_comm">
{% for comment in articles.comments.all %}
 <div id="comment-{{ comment.id }}">
 the <div>{{ comment.created_date }}</div>
 of <strong>{{ comment.author }}</strong>
 <p>{{ comment.text|linebreaks }}</p>
</div>
{% endfor %}
</div>


And JS (note, the template is made on the basis of literals ECMA2015 - selling quotes! )
....
handleFormSuccess function(data, textStatus, jqXHR){
 $( "#zone_comm" ).append(
`
 <div id="comment-${data.id }">
the <div>${data.created_date}</div>
the <strong>${data.author}</strong>
<p>${data.text}</p>
</div>
`
);
 }


Or even add them fully ajax...

Find more questions by tags DjangoAJAX