javascript - Delete method with Sweet Alert in Laravel

Question

I'm testing a method using Sweet Alert, to improve the messages issued by the Javascript alert method with the laravel framework.

1 - I downloaded the files sweetalert.css and sweetalert.min.js.

2 - So I connect the files from 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 - I created the delete button using the onclick event of Javascript and the following Sweet Alert function:

{!! 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 - This is my method for deleting users from UserController:

public function destroy($id)
{
    User::find($id)->delete();
    return redirect()->route('users.index')
                    ->with('success','User deleted successfully');
}

5 - The problem occurs when deleting a user, displays the alert message.

But automatically closes and deletes the user without allowing to take the confirmation actions, whether or not to delete the user, method defined in Sweet Alert.

Someone who can give a help to correct this problem or recommend a better method, since I am using Laravel as Framework.

Answer 1

in the view :

<button onclick="deleteItem(this)" data-id="{{ $user->id }}">Delete</button>

in the Jquery and 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>

in the Controller:

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

        }
    }

in the Route

Route::delete('/user/delete/{id}','UserController@destroy');