Delete in Laravel with ajax - php

Question

I am using Laravel and I want to delete record from admin panel with button
so I want to use Ajax to does not refresh page when I want to delete
so problem is this
when I click on button the record is going to delete but the page does not show any change ( I mean the record is deleted but it's still in page and when I refresh the page It's going to hide and delete)
controller :
$comment = Comment::find($id);
$comment->delete($id);
view:
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">{{ __('comment.index.comments') }}</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
{{--{{ __('comment.index.create') }}--}}
{{--Export--}}
</div>
{{--<button class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
{{--<i class="fa fa-calendar-o"></i>--}}
{{--This week--}}
{{--</button>--}}
<span>
Excel <i class="fas fa-cloud-download-alt"></i>
Create <i class="fas fa-plus-square"></i>
</span>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>{{ __('comment.index.id') }}</th>
<th>{{ __('comment.index.user-id') }}</th>
<th>{{ __('comment.index.parent-id') }}</th>
<th>{{ __('comment.index.comment') }}</th>
<th>{{ __('comment.index.commentable-id') }}</th>
<th>{{ __('comment.index.commentable-type') }}</th>
<th>{{ __('comment.index.status') }}</th>
<th>{{ __('comment.index.data') }}</th>
<th>{{ __('comment.index.setting') }}</th>
</tr>
</thead>
<tbody>
#foreach($comments as $comment)
<tr>
<td>{{ $comment->id }}</td>
<td>{{ $comment->user_id }}</td>
<td>{{ $comment->parent_id }}</td>
<td>{{ $comment->comment }}</td>
<td>{{ $comment->commentable_id }}</td>
<td>{{ $comment->commentable_type }}</td>
<td>{{ $comment->status }}</td>
<td>{{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</td>
<td>
{{--<form action="{{ route('change.approved', $comment->id) }}" method="post">--}}
{{--#csrf--}}
{{--{{ method_field('put') }}--}}
{{--<input value="change approved {{ $comment->approved }}" type="submit" class="btn btn-sm btn-success">--}}
{{--</form>--}}
{{--<form action="{{ route('comment.destroy', $comment->id) }}" method="post">--}}
{{--#csrf--}}
{{--{{ method_field('delete') }}--}}
{{--<input value="delete" type="submit" class="btn btn-sm btn-danger">--}}
{{--</form>--}}
<form class="form-inline" action="{{ route('change.approved', $comment->id) }}" method="post">
#csrf
{{ method_field('put') }}
{{--<input value="" >--}}
<button type="submit" class="btn btn-link"><i class="fa #if( $comment->approved == 1) fa-toggle-on text-success #else fa-toggle-off text-secondary #endif"></i> approved</button>
</form>
<hr class="p-0 m-1">
<button class="deleteProduct" data-id="{{ $comment->id }}" data-token="{{ csrf_token() }}" >Delete Task</button>
#csrf
{{ method_field('delete') }}
{{--<input value="delete">--}}
<button class="btn btn-sm btn-danger" type="submit"><i class="fa fa-trash"></i></button>
</form>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<script>
$(".deleteProduct").click(function() {
var id = $(this).data("id");
var token = $(this).data("token");
$.ajax(
{
url: "comment/delete/"+id,
type: 'DELETE',
dataType: "JSON",
data: {
"id": id,
"_method": 'DELETE',
"_token": token,
},
success: function ()
{
console.log("it Work");
}
});
console.log("It failed");
});
</script>
and route :
Route::delete('/comment/delete/{id}', 'admin\CommentController#destroy')->name('comment.destroy');
By the way I use AJAX in my view

Answer 1

Add comment id in tr tag so that every tr tag will be unique. On success of ajax remove that row(tr) by using comment id.
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">{{ __('comment.index.comments') }}</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
{{--{{ __('comment.index.create') }}--}}
{{--Export--}}
</div>
{{--<button class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
{{--<i class="fa fa-calendar-o"></i>--}}
{{--This week--}}
{{--</button>--}}
<span>
Excel <i class="fas fa-cloud-download-alt"></i>
Create <i class="fas fa-plus-square"></i>
</span>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>{{ __('comment.index.id') }}</th>
<th>{{ __('comment.index.user-id') }}</th>
<th>{{ __('comment.index.parent-id') }}</th>
<th>{{ __('comment.index.comment') }}</th>
<th>{{ __('comment.index.commentable-id') }}</th>
<th>{{ __('comment.index.commentable-type') }}</th>
<th>{{ __('comment.index.status') }}</th>
<th>{{ __('comment.index.data') }}</th>
<th>{{ __('comment.index.setting') }}</th>
</tr>
</thead>
<tbody>
#foreach($comments as $comment)
<tr id="{{ $comment->id }}">
<td>{{ $comment->id }}</td>
<td>{{ $comment->user_id }}</td>
<td>{{ $comment->parent_id }}</td>
<td>{{ $comment->comment }}</td>
<td>{{ $comment->commentable_id }}</td>
<td>{{ $comment->commentable_type }}</td>
<td>{{ $comment->status }}</td>
<td>{{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</td>
<td>
<form class="form-inline" action="{{ route('change.approved', $comment->id) }}" method="post">
#csrf
{{ method_field('put') }}
<button type="submit" class="btn btn-link"><i class="fa #if( $comment->approved == 1) fa-toggle-on text-success #else fa-toggle-off text-secondary #endif"></i> approved</button>
</form>
<hr class="p-0 m-1">
<button class="deleteProduct" data-id="{{ $comment->id }}" data-token="{{ csrf_token() }}" >Delete Task</button>
#csrf
{{ method_field('delete') }}
{{--<input value="delete">--}}
<button class="btn btn-sm btn-danger" type="submit"><i class="fa fa-trash"></i></button>
</form>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<script>
$(".deleteProduct").click(function(){
var id = $(this).data("id");
var token = $(this).data("token");
$.ajax(
{
url: "comment/delete/"+id,
type: 'DELETE',
dataType: "JSON",
data: {
"id": id,
"_method": 'DELETE',
"_token": token,
},
success: function ()
{
console.log("it Work");
$("tr#"+id).remove();
}
});
console.log("It failed");
});
</script>

Answer 2

Just do it.
<script>
$(".deleteProduct").click(function(){
var btn = $(this);
var id = $(this).data("id");
var token = $(this).data("token");
$.ajax(
{
url: "comment/delete/"+id,
type: 'DELETE',
dataType: "JSON",
data: {
"id": id,
"_method": 'DELETE',
"_token": token,
},
success: function ()
{
btn.closest("tr").remove(); // closest tr removed
console.log("it Work");
}
});
console.log("It failed");
});

Answer 3

You just hide that row by click on it. some like that...
$(".deleteProduct").click(function(){
$(this).closest("tr").hide();
var id = $(this).data("id");
var token = $(this).data("token");
$.ajax(
{
url: "comment/delete/"+id,
type: 'DELETE',
dataType: "JSON",
data: {
"id": id,
"_method": 'DELETE',
"_token": token,
},
success: function ()
{
console.log("it Work");
}
});
console.log("It failed");
});
Hope this help..
You may use this in after success response

Answer 4

you have to modify your script
<script>
$(".deleteProduct").click(function(){
var id = $(this).data("id");
var token = $(this).data("token");
$.ajax(
{
url: "comment/delete/"+id,
type: 'DELETE',
dataType: "JSON",
data: {
"id": id,
"_method": 'DELETE',
"_token": token,
},
success: function ()
{
$(this).closest("tr").remove();
alret('record deleted success fully');//or whatever type alert you want to show
}
});
console.log("It failed");
});