一个页面中的多个表单更新混凝土块？

Question

正如你从图片中看到的，我在一个页面中有几种形式。每个表单都有自己的块和评论列表。

我成功地通过AJAX/JQuery更新评论块后成功添加新的评论的形式。可以说，如果用户通过三维形式添加评论AJAX需要更新三维形式的三维评论块。下面你可以看到我的JS代码。

问题是，当我对所有表单（任务评论表单）使用相同的id，并且所有评论块（task-comments）的相同id都很好地只用第一种形式。当我提交第二个或第三个表格时，它会更新第一个注释块。我认为JS从上到下检查文档并找到第一个匹配。

当我对所有表单和注释块使用相同的类时，它的工作方式也是错误的。例如，当我提交所有3个评论块更新的第二个表单。

那么如何将特定的表单与特定的注释块相关联？

JS：

$(document).ready(function() { 
    $('.submit').on("click", function() { 
     event.preventDefault(); 
     console.log(event.preventDefault()); 
     var form = $(this).closest('form'); 
     $.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-{{ forloop.counter }}"> 
     {% include 'project/task_comment_list.html' %} 
    </div> 
</div> 

task_comment_form.html：

<form method="post" id="task-comment-form-{{ forloop.counter }}" 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 %} 

Answer 1

这是无效的用于多个DOM元素相同的ID。使用相同的类名是有效的，但会更新所有匹配的DOM元素。

我的建议，为每个表单和评论框添加一个唯一的ID。如果你不想复制你的JS代码，那么在你可以使用的表单中添加一个标识符来决定更新哪个评论框。

例如

<form id="task-comment-form-1" data-comment="task-comments-1"> 

然后在你的JS，你可以这样做

$(document).ready(function() { 
    $('.submit').on("click", function() { 
     event.preventDefault(); 
     console.log(event.preventDefault()); 
     var form = $(this).closest('form'); 
     var commentBoxId = form.data('comment'); 
     var commentBox = $('#'+commentBoxId); 
     $.ajax({ 
      url: form.attr("action"), 
      data: form.serialize(), 
      type: form.attr("method"), 
      dataType: 'json', 
      success: function (data) { 
       if (data.form_is_valid) { 
        commentBox.html(data.html_task_comment); 
       } 
       else { 
        form.html(data.html_task_comment_form); 
       } 
      } 
     }); 
     form[0].reset(); 
     return false; 
    }); 
});