Обновите определенный класс после публикации ajax Javascript

Question

Итак, после многих исследований, я пришел сюда, чтобы просить вашей помощи, вот моя проблема:

У меня есть система комментариев с несколькими формами на одной странице (я использую FOSCommentBundle в Symfony). И я хочу иметь возможность оставлять комментарии с помощью Ajax (эта часть работает, никаких проблем) и обновлять раздел комментариев после отправки сообщения (и я застрял в этой части).

Есть пример кода:

$(document).on("submit", ".postAjax", function(e){
    e.preventDefault();
    $(this).LoadingOverlay("show");
    data = $(this).serializeObject();

    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        success:function(){
            $(".comments").load(window.location.href + " .comments");
        }
    });
});

<form method="POST" class="postAjax" action="./comment/post/1">
  <input type="textarea" name="comment">
  <input type="hidden" name="identifier" value="1">
  <input type="submit">
 </form>
 <div class="comments">
   <!-- Comments refreshed after post here -->
 </div>
 
 <form method="POST" class="postAjax" action="./comment/post/2">
  <input type="textarea" name="comment">
  <input type="hidden" name="identifier" value="2">
  <input type="submit">
 </form>
 <div class="comments">
   <!-- Comments refreshed after post here -->
 </div>
 
 <!-- ... -->

Я много чего перепробовал, функция ".load" в JQuery, но она загружает все классы "comments" и дублирует комментарии в каждом классе.

Если у кого-то есть решение ... Спасибо

Answer 1

Прежде всего, в предоставленном коде у вашего тега <form> отсутствует атрибут действия для правильной работы кода.

Затем, чтобы ответить на ваш вопрос, измените действие вашего контроллера (которое сохраняет ваш новый комментарий), чтобы оно возвращало информацию из отправленного комментария (формат json лучше). Затем преобразуйте возвращенный json в html-код и добавьте результат к своим комментариям <div>, например:

$(document).on("submit", ".postAjax", function(e){
    e.preventDefault();
    $(this).LoadingOverlay("show");
    data = $(this).serializeObject();
    var element = $(this);

    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        success:function(newCommentData){
            /* do some process here to transform your newCommentData array into html code */
            $(element).next(".comments").append(newCommentData);
        }
    });
});

Кроме того, если вы хотите, чтобы он был чище, у вас может быть скрытый div, с той же моделью, что и div комментария, но с каждым содержимым, замененным шаблонами (например: %commentTitle%, %commentBody%). Затем каждый раз, когда вы публикуете новый комментарий, вы можете получить этот скрытый div и заменить шаблоны данными вашего комментария. Таким образом, если вы измените структуру раздела комментариев позже, JS-скрипт будет работать так же, без каких-либо настроек.

Answer 2

Попробуйте это

$(document).on("submit", ".postAjax", function(e){
    e.preventDefault();
    $(this).LoadingOverlay("show");
    data = $(this).serializeObject();

    var $comment = $(this).next(".comments");

    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        success:function(){
            $comment.append("<div />");
            $comment.last("div").load(window.location.href + " .comments");
        }
    });
});