我正在使用Laravel,我想用管理面板中的按钮删除记录
所以当我想删除时,我想使用Ajax不刷新页面
问题就是这个
当我点击按钮时,记录将被删除,但页面没有显示任何变化(我的意思是记录被删除但它仍然在页面中,当我刷新页面时它将隐藏和删除)
控制器：
$comment = Comment::find($id);
$comment->delete($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>
<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>
和路线：
Route::delete('/comment/delete/{id}', 'admin\CommentController@destroy')->name('comment.destroy');
顺便说一句,我在我看来使用AJAX
解决方法:
在tr标记中添加注释id,以便每个tr标记都是唯一的.在ajax成功时,使用comment id删除该行(tr).
<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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
