Это так странно, что мне пришлось записать подарок, чтобы согласиться с моим объяснением, чтобы я мог представить его более четко.
Теперь вот мое объяснение шагов, которые я делаю в этом GIF.
Моя форма для удаления:
<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();
}
Буду признателен за любую помощь, так как я довольно долго думал об этой проблеме, и я не понял, где моя проблема.
Я бы порекомендовал вместо рендеринга каждой кнопки удаления как единой формы, я бы предложил иметь одну функцию 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, которые принимают параметр от нажатия кнопки, как правило, является предпочтительным методом создания приложений такого стиля, так как он сокращает большую работу, требуемую не только для того, чтобы создать это в первую очередь, но и поддерживать его в долгосрочной перспективе. ,
Других решений пока нет …