Laravel 中带有 Sweet Alert 的删除方法
Posted
技术标签:
【中文标题】Laravel 中带有 Sweet Alert 的删除方法【英文标题】：Delete method with Sweet Alert in Laravel 【发布时间】：2017-03-27 13:06:00 【问题描述】：我正在测试一种使用 Sweet Alert 的方法，以改进使用 laravel 框架的 javascript 警报方法发出的消息。
1 - 我下载了文件 sweetalert.css 和 sweetalert.min.js。
2 - 所以我从 app.blade.php 连接文件
<!-- Sweet Alert -->
<link href=" asset('/dist/css/sweetalert.css') " rel="stylesheet">
<!-- Sweet Alert -->
<script src=" asset('/dist/js/sweetalert.min.js') "></script>
3 - 我使用 Javascript 的 onclick 事件和以下 Sweet Alert 函数创建了删除按钮：
!! Form::open(['method' => 'DELETE','route' => ['users.destroy', $user->id],'style'=>'display:inline']) !!
<button onclick="
swal(
title: 'Esta seguro de realizar esta Acción?',
text: 'Si procede este usuario será eliminado!',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Eliminar!',
cancelButtonText: 'Cancelar',
closeOnConfirm: false,
closeOnCancel: false
,
function()
swal('Usuario eliminado!', 'Este usuario fue eliminado de nuestros registros.', 'success');
);"
class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Eliminar usuario"> <i class="material-icons">delete</i>
</button>
!! Form::close() !!
4 - 这是我从 UserController 中删除用户的方法：
public function destroy($id)
User::find($id)->delete();
return redirect()->route('users.index')
->with('success','User deleted successfully');
5 - 删除用户时出现问题，显示警告消息。
但是自动关闭和删除用户，不允许采取确认动作，是否删除用户，方法在 Sweet Alert 中定义。
由于我使用 Laravel 作为框架，因此可以提供帮助以解决此问题或推荐更好的方法。
【问题讨论】：
看看这个。 ***.com/questions/31136889/… 你好@CannotFindSymbol 非常感谢你，但是使用这种方法消除了用户并且不会生成通知。 【参考方案1】：无论您是确认还是取消删除，您都在对按钮单击执行操作。
<a href="" class="button" data-id="$user->id">Delete</a>
Jquery 和 Ajax：
$(document).on('click', '.button', function (e)
e.preventDefault();
var id = $(this).data('id');
swal(
title: "Are you sure!",
type: "error",
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes!",
showCancelButton: true,
,
function()
$.ajax(
type: "POST",
url: "url('/destroy')",
data: id:id,
success: function (data)
//
);
);
);
还有：
public function destroy(Request $request)
User::find($request->id)->delete();
return redirect()->route('users.index')
->with('success','User deleted successfully');
【讨论】：
非常感谢您的回答，我正在尝试应用您的方法，但无法正常工作。它只生成确认是否继续操作的窗口，但不会删除记录。错误如下： POST localhost/zizaco_entrust/public/destroy 500（内部服务器错误）发送@jquery.min.js:4ajax @jquery.min.js:4（匿名函数）@users?page=3:429l @sweetalert。 min.js:1s @sweetalert.min.js:1g @sweetalert.min.js:1 服务器出错。确保你有路线：Route::post('/destroy','UserController@destroy');
非常感谢。最后我不得不添加一个 location.reload();事件后刷新页面。非常感谢。
为什么我不能通过使用 var id = $(this).data('id'); 得到值 data-id="$user->id" 跨度>
【参考方案2】：
在视图中：
<button onclick="deleteItem(this)" data-id=" $user->id ">Delete</button>
在 Jquery 和 Ajax 中：
<script type="application/javascript">
function deleteItem(e)
let id = e.getAttribute('data-id');
const swalWithBootstrapButtons = Swal.mixin(
customClass:
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
,
buttonsStyling: false
);
swalWithBootstrapButtons.fire(
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
).then((result) =>
if (result.value)
if (result.isConfirmed)
$.ajax(
type:'DELETE',
url:'url("/user/delete")/' +id,
data:
"_token": " csrf_token() ",
,
success:function(data)
if (data.success)
swalWithBootstrapButtons.fire(
'Deleted!',
'Your file has been deleted.',
"success"
);
$("#"+id+"").remove(); // you can add name div to remove
);
else if (
result.dismiss === Swal.DismissReason.cancel
)
swalWithBootstrapButtons.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
);
);
</script>
在控制器中：
public function destroy(User $user, Request $request, $id)
if ($request->ajax())
$user = User::findOrFail($id);
if ($user)
$user->delete();
return response()->json(array('success' => true));
在路线中
Route::delete('/user/delete/id','UserController@destroy');
【讨论】：
【参考方案3】：我认为我的代码更接近 Laravel 框架，它有 CSRF 并且使用了 Delete 方法；也更容易集成。
Laravel 8 和 SweetAlert 2
用户控制器：
public function destroy(User $user)
$user->delete();
toast('Your file has been deleted !', 'success');
return redirect(route('user.index'));
删除 html 表单： 用于 css 类的引导程序
<form id="delete-user-form" action="route('user.destroy',$user)" method="POST">
@csrf
@method('DELETE')
<button onclick="return false" id="delete-user" class="btn btn-danger">Delete</button>
</form>
jQuery
$('#delete-user').on('click', function (e)
e.preventDefault();
let id = $(this).data('id');
Swal.fire(
title: 'Are you sure ?',
text: "You won't be able to revert this !",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
).then((result) =>
if (result.isConfirmed)
$('#delete-post-form').submit();
)
);
【讨论】：
【参考方案4】：我已将此代码实现到我的 laravel 项目中，我的路线是销毁的资源路线。 这段代码对我有用。如上面的评论 location.reload() 帮助我，我将它放入代码中...请尝试让我知道...它是否适合您...
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
//.deletebutton is the class name in button
<script>
$('.deletebutton').on('click', function ()
// return confirm('Are you sure want to delete?');
event.preventDefault();//this will hold the url
swal(
title: "Are you sure?",
text: "Once clicked, this will be softdeleted!",
icon: "warning",
buttons: true,
dangerMode: true,
)
.then((willDelete) =>
if (willDelete)
swal("Done! category has been softdeleted!",
icon: "success",
button: false,
);
location.reload(true);//this will release the event
else
swal("Your imaginary file is safe!");
);
);
</script>
【讨论】：
【参考方案5】：我已经在我的 laravel 项目中实现了这段代码，并通过使用带有 slug 的路由名称来删除数据。这段代码对我有用。而且我还通过使用 id 从表中删除行而不使用 reload()。所以试试这个代码，让我知道它是否适合你。
$.ajaxSetup(
headers:
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
);
function confirmDelete(slug)
swal(
title: "Are you sure!",
type: "error",
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes!",
showCancelButton: true,
)
.then((willDelete) =>
if (willDelete.value == true)
var url = ' route("instrument.delete", ":slug") ';
url = url.replace(':slug', slug);
$.ajax(
url: url,
type: "POST",
data:
'_method': 'DELETE'
,
success: function (data)
if (data.status == 1)
swal(
title: "Success!",
type: "success",
text: "Instrument has been deleted \n Click OK",
icon: "success",
confirmButtonClass: "btn btn-outline-info",
);
$('#tr' + data.slug).remove();
,
error: function (data)
swal(
title: 'Opps...',
text: data.message,
type: 'error',
timer: '1500'
)
)
);
【讨论】：
以上是关于Laravel 中带有 Sweet Alert 的删除方法的主要内容，如果未能解决你的问题，请参考以下文章
Android美丽的对话框项目sweet-alert-dialog
Android漂亮的对话框项目sweet-alert-dialog
用 WooCommerce 上的 JS Sweet Alert 替换“已添加到购物车”通知