[英]Delete method with Sweet Alert in Laravel
我正在使用 Sweet Alert 測試一種方法,以改進由 Javascript 警報方法與 laravel 框架發出的消息。
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 作為框架。
在視圖中:
<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');
無論您確認還是取消刪除,您都在對按鈕單擊執行操作。
<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');
}
我認為我的代碼更接近 Laravel 框架,它有CSRF並且使用了Delete方法; 也更容易集成。
用戶控制器:
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();
}
})
});
我已將此代碼實現到我的 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>
我已經在我的 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'
})
}
})
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.