在 laravel 5.8 上使用 swal 确认删除
Confirm delete using swal on laravel 5.8
我在用swal确认删除的时候遇到了一些问题,不知道怎么弄
这是我的 blade 查看文件:
<form action="{{ route('user.destroy', $us->id)}}" method="post">
@method('DELETE')
@csrf
<input class="btn btn-danger" type="submit" value="Delete" />
</form>
和使用 swal 的脚本
<script>
//== Class definition
var SweetAlert2Demo = function() {
//== Demos
var initDemos = function() {
$('.btn-danger').click(function(e) {
e.preventDefault();
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
buttons:{
confirm: {
text : 'Yes, delete it!',
className : 'btn btn-success'
},
cancel: {
visible: true,
className: 'btn btn-danger'
}
}
}).then((Delete) => {
if (!Delete) {
e.preventDefault();
}
});
});
};
return {
//== Init
init: function() {
initDemos();
},
};
}();
//== Class Initialization
jQuery(document).ready(function() {
SweetAlert2Demo.init();
});
</script>
swal的版本是https://sweetalert.js.org not https://sweetalert2.github.io/
我正在 laravel 5.8 上使用路线资源
谢谢!
出现循环时更新
你应该给你的表单一个 id
然后在 swal
回调中使用 ID
提交表单
<form action="{{ route('user.destroy', $us->id)}}" method="post" id="yourFormId">
你的 JS Click 按钮几乎是一样的。 Swal JS 回调方法中的一些小改动
$('.btn-danger').click(function(e) {
var $form = $(this).closest("form"); //Get the form here.
e.preventDefault();
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
buttons:{
confirm: {
text : 'Yes, delete it!',
className : 'btn btn-success'
},
cancel: {
visible: true,
className: 'btn btn-danger'
}
}
}).then((Delete) => {
console.log(Delete); //This will be true when delete is clicked
if (Delete) {
$form.submit(); //Submit your Form Here.
//$('#yourFormId').submit(); //Use same Form Id to submit the Form.
}
});
});
使用 GET 方法代替 POST。
无需使用按钮或组合任何东西。
试试这个例子,它总是适用于我的所有项目。
作为
使用锚标签,而不是按钮
<a class="btn btn-action text-danger" title="Delete" data-toggle="tooltip" onclick="deletefunction({{$your_id}})"><i class="fa fa-trash"></i></a>
添加脚本为,
<script>
var deletefunction = function(id){
swal({
title: "Are you sure you want to Delete this?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
closeOnConfirm: false,
preConfirm: function(result) {
window.location.href = '{{url('/your_route/delete')}}/'+id;
},
allowOutsideClick: false
});
};
</script>
我在用swal确认删除的时候遇到了一些问题,不知道怎么弄
这是我的 blade 查看文件:
<form action="{{ route('user.destroy', $us->id)}}" method="post">
@method('DELETE')
@csrf
<input class="btn btn-danger" type="submit" value="Delete" />
</form>
和使用 swal 的脚本
<script>
//== Class definition
var SweetAlert2Demo = function() {
//== Demos
var initDemos = function() {
$('.btn-danger').click(function(e) {
e.preventDefault();
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
buttons:{
confirm: {
text : 'Yes, delete it!',
className : 'btn btn-success'
},
cancel: {
visible: true,
className: 'btn btn-danger'
}
}
}).then((Delete) => {
if (!Delete) {
e.preventDefault();
}
});
});
};
return {
//== Init
init: function() {
initDemos();
},
};
}();
//== Class Initialization
jQuery(document).ready(function() {
SweetAlert2Demo.init();
});
</script>
swal的版本是https://sweetalert.js.org not https://sweetalert2.github.io/
我正在 laravel 5.8 上使用路线资源 谢谢!
出现循环时更新
你应该给你的表单一个 id
然后在 swal
回调中使用 ID
<form action="{{ route('user.destroy', $us->id)}}" method="post" id="yourFormId">
你的 JS Click 按钮几乎是一样的。 Swal JS 回调方法中的一些小改动
$('.btn-danger').click(function(e) {
var $form = $(this).closest("form"); //Get the form here.
e.preventDefault();
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
buttons:{
confirm: {
text : 'Yes, delete it!',
className : 'btn btn-success'
},
cancel: {
visible: true,
className: 'btn btn-danger'
}
}
}).then((Delete) => {
console.log(Delete); //This will be true when delete is clicked
if (Delete) {
$form.submit(); //Submit your Form Here.
//$('#yourFormId').submit(); //Use same Form Id to submit the Form.
}
});
});
使用 GET 方法代替 POST。 无需使用按钮或组合任何东西。 试试这个例子,它总是适用于我的所有项目。 作为 使用锚标签,而不是按钮
<a class="btn btn-action text-danger" title="Delete" data-toggle="tooltip" onclick="deletefunction({{$your_id}})"><i class="fa fa-trash"></i></a>
添加脚本为,
<script>
var deletefunction = function(id){
swal({
title: "Are you sure you want to Delete this?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
closeOnConfirm: false,
preConfirm: function(result) {
window.location.href = '{{url('/your_route/delete')}}/'+id;
},
allowOutsideClick: false
});
};
</script>