Здравствуйте! Помогите решить задачу.
Вообщем на одной странице есть список задач и у каждой задачи есть список комментариев и все это на одной странице. То есть для каждой задачи есть форма для добавления комментариев. Получается на одной странице несколько форм.
Использую следующий код для обновления списка комментариев через AJAX, но правильно обновляется лишь комментарии для первой задачи. Я думаю проблема в том, что я использую id для формы и у всех он одинаковый и JS просматривая документ ищет первое совпадение в документе, поэтому корректно работает только первая форма для добавления и обновления списка комментариев.
Я пробовал указать class вместо id, но не помогло. Также пробовал в template указать id формы как `task-comment-form-{{forloop.counter}}`, тем самым сделав id формы уникальной, но как дальше это в JS прописать не могу понять. Как решить данную проблему?
Javascript:
$("#task-comment-form").submit(function(event) {
event.preventDefault();
console.log(event.preventDefault());
var form = $(this);
$.ajax({
url: form.attr("action"),
data: form.serialize(),
type: form.attr("method"),
dataType: 'json',
success: function (data) {
if (data.form_is_valid) {
$("#task-comments").html(data.html_task_comment);
}
else {
$("#task-comment-form").html(data.html_task_comment_form);
}
}
});
$("#task-comment-form")[0].reset();
return false;
});
task_list.html:
<div class="list-group custom-list-group">
<div class="list-group-item bg-faded">
{% include 'project/task_comment_form.html' %}
</div>
<div id="task-comments">
{% include 'project/task_comment_list.html' %}
</div>
</div>
task_comment_form.html:
<form method="post" id="task-comment-form" action="{% url 'project:task_comment_add' project_code=project.code group_task_code=group_task.code task_code=task.code %}">
<button type="submit"></button>
</form>
task_comment_list.html:
{% for comment in task.comments.all %}
<div class="list-group-item flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">{{ comment.author }}</h6>
<small>{{ comment.created }}</small>
</div>
<p class="custom-p">{{ comment.text }}</p>
</div>
{% empty %}
<div class="list-group-item flex-column align-items-start">
<div class="d-flex w-100 justify-content-center">
<h6 class="mb-1 custom-h"><i class="fa fa-info-circle" aria-hidden="true"></i>	{% trans 'NO COMMENTS' %}</h6>
</div>
</div>
{% endfor %}
Простой