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

You are Performing action on button click irrespective of whether you confirm or cancelled the deletion.

<a href="" class="button" data-id="{{$user->id}}">Delete</a>

Jquery and 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) {
                              //
                    }         
            });
    });
});

And:

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