不知道有没有人能帮我解决这个问题。我是一个完全的新手与JS和JQuery。
我想避免在我的博客中删除帖子的意外,所以我想有它,所以当我点击删除时,它会弹出一个模态,以确认我想要删除帖子,然后做或不做。
我添加了以下代码:
<!-- Button trigger modal to delete post -->
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#deletePost">
Delete
</button>
<!-- Modal -->
<div class="modal fade" id="deletePost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Delete Blog Post</h4>
</div>
<div class="modal-body">
<p>You are about to delete a blog post, are you sure all that effort is to be sent to the unrecoverable trash can?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">OMG, NO!!!</button>
<form action="/blog/{{ $post->id }}" method="POST">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="submit" class="pull-right btn btn-danger">Delete it!</button>
</form>
</div>
</div>
</div>
</div>
现在所有的工作都很好,我现在要做的就是当我点击"删除它!"按钮时,它就会这样做。
所有的工作除了删除正确的帖子,我想传递
{{ $post->id }}
到模态,以便它将post id发送给控制器。
我的问题是我如何将上面的id传递给模态?我读了很多例子,他们都是如此不同,所以我想最好是得到一些意见。
谢谢!
我非常推荐使用SweetAlert插件,它在视觉上与Twitter Bootstrap兼容,使用起来更愉快。这是一段用于多语言、模型无关的删除函数的代码:
$('body').on('click', 'sweet-delete', function (e) {
e.preventDefault();
var id = $(this).data('id');
var model = $(this).data('model');
swal({
title: lang.confirm_please,
text: lang.delete_warning,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: lang.delete_button,
closeOnConfirm: false,
showLoaderOnConfirm: true,
}, function(){
$.post('/'+model+'/'+id, {_method: 'DELETE'}, function(data){
swal({
title: lang.delete_title,
text: lang.delete_success,
type: "success",
timer: 5000
}, function(){
window.location.href = '/'+model;
});
});
});
})
在你看来:
<button data-id="{{$post->id}}" data-model="blog" class="pull-right btn btn-danger sweet-delete">@lang('app.delete')</button>
我必须提到,为了将CSRF令牌附加到我的ajax表单,我使用:
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});
在我的app.js,和
<meta name="csrf-token" content="{{csrf_token()}}">
要将post ID
传递给模态表单,应该使用jQuery将其插入到模态中。
按钮:
<button type="button" class="btn btn-default btn-xs delete-post" data-post-id="{{ $post->id }}">Delete</button>
注意:我们将使用下面的语句触发模态,所以我们也可以插入ID。
jQuery:$(document).ready(function() {
var modalObj = $('#deletePost');
$('.delete-post').click(function(e) {
var postId = $(this).data('post-id');
modalObj.find('form').attr('action', '/blog/' + postId);
modalObj.modal('show');
});
});
在本例中,根据相关的post id动态设置action
属性。