Hassan
Reputation: 422
Delete in Laravel with ajax
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">
{{--<a href="#" class="btn btn-sm btn-outline-success disabled">{{ __('comment.index.create') }}</a>--}}
{{--<a href="#" class="btn btn-sm btn-outline-secondary">Export</a>--}}
</div>
{{--<button class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
{{--<i class="fa fa-calendar-o"></i>--}}
{{--This week--}}
{{--</button>--}}
<span>
<a href="#" class="btn btn-warning btn-sm">Excel <i class="fas fa-cloud-download-alt"></i></a>
<a href="#" class="btn btn-info btn-sm">Create <i class="fas fa-plus-square"></i></a>
</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><a href="{{ route('comment.show', $comment->id) }}">{{ $comment->id }}</a></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
Upvotes: 2
Views: 666
Answers (4)
Pragna
Reputation: 472
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">
{{--<a href="#" class="btn btn-sm btn-outline-success disabled">{{ __('comment.index.create') }}</a>--}}
{{--<a href="#" class="btn btn-sm btn-outline-secondary">Export</a>--}}
</div>
{{--<button class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
{{--<i class="fa fa-calendar-o"></i>--}}
{{--This week--}}
{{--</button>--}}
<span>
<a href="#" class="btn btn-warning btn-sm">Excel <i class="fas fa-cloud-download-alt"></i></a>
<a href="#" class="btn btn-info btn-sm">Create <i class="fas fa-plus-square"></i></a>
</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><a href="{{ route('comment.show', $comment->id) }}">{{ $comment->id }}</a></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>
Upvotes: 3
Shailendra Gupta
Reputation: 1118
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");
});
Upvotes: 0
Ravindra Patel
Reputation: 337
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");
});
Upvotes: 2
Mohd Qayyoom Khan
Reputation: 78
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
Upvotes: 0
Related Questions
- How to write an ajax script to delete an entry?
- Laravel 5.5 delete item with ajax call on click
- I want to delete an entry using ajax in laravel 5.8
- Ajax Delete in Laravel
- Delete data by ajax in laravel
- Laravel Delete button not working with Ajax call
- How to delete record in laravel via ajax
- Laravel5 ajax delete wouldn't work
- PHP Laravel : Delete Data using Ajax
- How to delete from the database using Ajax with Laravel and Restful Controllers