[英]Laravel 5.2 - Sweet Alert confirmation box
I have Categories listed in a view.我在视图中列出了类别。 A delete category button is also there in the view which does work and deletes the category when clicked.
视图中还有一个删除类别按钮,该按钮在单击时起作用并删除该类别。
What I want to do is before deleting a category, a sweet alert dialog to pop up and ask for confirmation.我想要做的是在删除类别之前,弹出一个甜蜜的警报对话框并要求确认。 If confirmed, it should go to the defined route and delete the category.
如果确认,它应该去定义的路由并删除类别。
The delete link is defined like this:删除链接定义如下:
<a id="delete-btn" href="{{ route('admin.categories.destroy', $category->id) }}" class="btn btn-danger">Delete</a>
and the script is defined like this:脚本定义如下:
<script>
$(document).on('click', '#delete-btn', function(e) {
e.preventDefault();
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled","Category deletion Cancelled", "error");
}
});
});
</script>
However, when I click the delete button it deletes the category, but the sweet alert message doesn't show up.但是,当我单击删除按钮时,它会删除类别,但不会显示甜蜜警报消息。
The route is defined as following:路由定义如下:
Route::get('/categories/destroy/{category}', [
'uses' => 'CategoriesController@destroy',
'as' => 'admin.categories.destroy',
]);
and the controller function is defined as:控制器函数定义为:
public function destroy(Category $category)
{
$category->delete();
//this alert is working fine. however, the confirmation alert should appear
//before this one, which doesn't
Alert::success('Category deleted successfully', 'Success')->persistent("Close");
return redirect()->back();
}
Any help would be appreciated.任何帮助将不胜感激。 Thanks.
谢谢。
Try this:试试这个:
<script>
var deleter = {
linkSelector : "a#delete-btn",
init: function() {
$(this.linkSelector).on('click', {self:this}, this.handleClick);
},
handleClick: function(event) {
event.preventDefault();
var self = event.data.self;
var link = $(this);
swal({
title: "Confirm Delete",
text: "Are you sure to delete this category?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: true
},
function(isConfirm){
if(isConfirm){
window.location = link.attr('href');
}
else{
swal("cancelled", "Category deletion Cancelled", "error");
}
});
},
};
deleter.init();
</script>
EDIT : From your comment at @kalyan-singh-rathore's answer, I think you're not properly injecting the script in your blade template.编辑:根据您对@kalyan-singh-rathore 的回答的评论,我认为您没有正确地在刀片模板中注入脚本。 If you're extending a base layout, make sure you've included the script or yielded it from a child layout.
如果您要扩展基本布局,请确保已包含脚本或从子布局生成它。
Write anchor in below way.用下面的方式写锚点。
<a href="#" customParam="URL">Delete</a>
Now in URL select change href to customParam.现在在 URL 中选择将 href 更改为 customParam。
function (isConfirm) {
if (isConfirm) {
window.location = link.attr('customParam');
} else {
swal("cancelled", "Category deletion Cancelled", "error");
}
}
Basically in your case both href and event lisner are on click.基本上在你的情况下,href 和 event lisner 都在点击。
Try this one it worked out for me :)试试这个对我有用的:)
document.querySelector('#promote').addEventListener('submit', function (e) {
let form = this;
e.preventDefault(); // <--- prevent form from submitting
swal({
title: "Promote Students",
text: "Are you sure you want to proceed!",
type: "warning",
showCancelButton: true,
// confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, I am sure!',
cancelButtonText: "No, cancel it!",
closeOnConfirm: false,
closeOnCancel: false,
dangerMode: true,
}).then((willPromote) => {
e.preventDefault();
if (willPromote.value) {
form.submit(); // <--- submit form programmatically
} else {
swal("Cancelled", "No students have been promoted :)", "error");
e.preventDefault();
return false;
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.