Странная ошибка при удалении комментариев.Первое удаление проходит нормально, второе удаляет неправильный комментарий

Question

Это так странно, что мне пришлось записать gif, чтобы согласиться с моим объяснением, чтобы я мог представить его более четко.

https://imgur.com/a/5eaVgWu

Теперь вот мое объяснение шагов, которые явозьмите этот gif.

• Я создаю 3 комментария под названием «Первый», «Второй» и «Третий».
• Я обновляю phpMyAdmin, чтобы вы могли видеть, что они находятся вфакт создан.
• Я проверяю их скрытые входные значения, чтобы мы могли подтвердить, что они содержат правильные и соответствующие идентификаторы.
• Затем я удаляю «Третий» комментарий и обновляю базу данных, чтобы вы могли видетьчто правильный комментарий был удален.
• Вот здесь и начинается проблема.Я нажимаю, чтобы удалить «Первый» комментарий, и на моей странице это выглядит так, как будто я действительно удалил «Первый» комментарий, однако в базе данных мы можем видеть, что в действительности «Второй» комментарий был удален, а первый по-прежнему остаетсятам.
• Наконец, когда я пытаюсь удалить «Второй» комментарий на странице, я получаю сообщение об ошибке сервера в консоли.Ошибка в том, что я пытаюсь удалить несуществующую запись.
• Между тем в базе данных по-прежнему существует комментарий "Первый".

Моя форма для удаления:

<form method='POST' action=''>
    <input type="hidden" name="comment_id" value="{{ $comment->id }}">
    {{ csrf_field() }}
    {{ method_field('delete') }}
    <button class='submit-btn delete-comment' type='submit' name='commentDelete'>X</button>
</form>

JavaScript Ajax:

$('.delete-comment').on('click', function(event) {
    event.preventDefault();

    var button = $(this);
    var flexbox = button.parents().eq(2);
    var commentId = $("input[name=comment_id]").val();

    $.ajax({
        method: 'POST',
        url: urlDeleteComment,
        data: {
            commentId: commentId,
            _method: 'delete',
            _token: token
        }
    }).done(function(response) {
        flexbox.remove();
    })
});

Функция удаления комментариев:

public function deleteComment(Request $request){
    $commentId = $request['commentId'];
    $comment = Comment::find($commentId);
    $comment->delete();
}

Любая помощь будет принята с благодарностью, так как я довольно долго думал об этой проблеме, и у меня нетне понял, где моя проблема.

Answer 1

Я бы порекомендовал вместо рендеринга каждой кнопки удаления в виде единой формы, я бы предложил иметь одну функцию AJAX, которая принимает значение, которое вызывается кнопками (не представлениями формы) со значением данных.Например,

<button class="btn-delete" data-id="{{ $comment->id }}">Delete</button>

Вам не нужна форма, скрытое поле или токен CSRF.AJAX обрабатывает все остальное.

$('.btn-delete').on('click', function() {

    var id = $(this).data('id'); // Gets the value from the data-id field

    $.ajax({
        url: urlDeleteComment,   // I'm assuming you already have this set somewhere
        method: 'POST',
        data: 'comment_id='+id,
        success: function(response) {
            // ...
        },
        error: function(xhr) {
            // ...
        }
    });

});

Это отправит запрос на сервер с идентификатором commend для нажатой кнопки.

Я бы также рекомендовал использовать функции успеха / ошибки, чтобы вы могли обработать сценарий, в котором удаление не удалось.(Например, комментарий уже удален или у вас нет прав на удаление этого комментария).

Что касается самого кода на стороне сервера, вы можете просто обрабатывать вещи как есть.Я бы рекомендовал возвращать 200, если все прошло хорошо, или ошибку 4xx / 5xx, чтобы можно было вызвать функцию ошибки AJAX, если что-то пойдет не так.

Что касается фактического удаления на экране.Я бы порекомендовал обернуть комментарий в div идентификатором, который совпадает с идентификатором на кнопке удаления.Например:

<div class="comment" data-comment="{{ $comment->id}}">
    <!-- Your comment here -->
    <button class="btn-delete" data-id="{{ $comment->id }}">Delete</button>
</div>

Так что, когда вы хотите удалить комментарий с экрана, внутри вашего успешного вызова AJAX:

// ...
success: function(response) {
    $('.comment[data-comment="' + id + '"]').slideUp();
}
// ...

---

Причина, по которой я предлагаюальтернатива, а не попытка исправить текущий метод подхода (который возможен) состоит в том, что существует много дополнительной работы / мусора, которая связана с отображением формы каждый раз при отображении кнопки.

Использование универсальногоВызовы AJAX, которые принимают параметр от нажатия кнопки, как правило, являются предпочтительным методом создания приложений такого стиля, поскольку они сокращают большую работу, требуемую не только для создания этого в первую очередь, но и для поддержания его в долгосрочной перспективе.