一個頁面中的多個表單更新混凝土塊？

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; 
    }); 
});