@nurzhannogerbek

Указать уникальный id для множества форм в одной странице?

Здравствуйте! Помогите решить задачу.

Вообщем на одной странице есть список задач и у каждой задачи есть список комментариев и все это на одной странице. То есть для каждой задачи есть форма для добавления комментариев. Получается на одной странице несколько форм.

Использую следующий код для обновления списка комментариев через 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>&#9;{% trans 'NO COMMENTS' %}</h6>
        </div>
    </div>
{% endfor %}
  • Вопрос задан
  • 1042 просмотра
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Я думаю проблема в том, что я использую id для формы и у всех он одинаковый

Правильно думаете, id уникальное значение элемента, на странице он повторяться не должен.
меняем ваш код так:
$(document).ready(function () {
$("form").on("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;
});
});
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект