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

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

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

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

0

Решение

Я бы порекомендовал вместо рендеринга каждой кнопки удаления как единой формы, я бы предложил иметь одну функцию 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) {
// ...
}
});

});

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

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

Что касается самого кода на стороне сервера, вы можете просто обрабатывать вещи как есть. Я бы рекомендовал возвращать 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, которые принимают параметр от нажатия кнопки, как правило, является предпочтительным методом создания приложений такого стиля, так как он сокращает большую работу, требуемую не только для того, чтобы создать это в первую очередь, но и поддерживать его в долгосрочной перспективе. ,

3

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector