javascript 在Laravel中使用Sweet Alert删除方法

1l5u6lss  于 2023-03-16  发布在  Java
关注(0)|答案(6)|浏览(128)

我正在测试一个使用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作为框架。

9fkzdhlc

9fkzdhlc1#

无论是确认还是取消删除,您都将在单击按钮时执行操作。

<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');
}
enyaitl3

enyaitl32#

在该意见中:

<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');
yc0p9oo0

yc0p9oo03#

我认为我的代码更接近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类的 Bootstrap *

<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();
                }
            })
        });
sqyvllje

sqyvllje4#

我已经实现了这段代码到我的laravel项目和我的路线是资源路线销毁。这段代码是为我工作。在上面的注解位置。重载()帮助我,我把它变成代码...请尝试让我知道...它为你工作或不...

<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>
hts6caw3

hts6caw35#

我已经在我的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'
                        })
                    }
                })
            }
        });
}
kzipqqlq

kzipqqlq6#

<script>
  $('.delete').click(function() {
    var id= $(this).attr('data-id');
    swal({
        title: "Apakah Anda Yakin ?",
        icon: "info",
        buttons: true,
        dangerMode: true,
      })
      .then((willDelete) => {
        if (willDelete) {
          window.location = "/delete/" + ""
          swal("Deleted!", {
            icon: "success",
          });
        } else {
          swal({
            title: "Canceled`enter code here` !?",
            icon: "error",

          });
        }
      });
  });
</script>

相关问题