Search code examples
javascriptlaravelsweetalertsweetalert2

Why are entries deleted in both cases?

Brief

Hello everyone! I'm starter in javascript. I use Laravel + DataTables in my project. Now I use sweetalert2 instead of default confirms javascript.

Code

Here I call my javascript method:

<a href="#" onclick="deleteData('.$contact->id.')" class="btn btn-danger btn-xs">
   <i class="fa fa-trash"></i>
   <span>Delete</span>
</a>

Here my javascript function:

function deleteData(id){
  var csrf_token = $('meta[name="csrf-token"]').attr('content');
  swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    cancelButtonColor: '#d33',
    confirmButtonColor: '#3085d6',
    confirmButtonText: 'Yes, delete it!'
  }).then(function(){
    $.ajax({
      url: "{{url('contact')}}" + '/' + id,
      type: "POST",
      data: {'_method' : 'DELETE', '_token' : csrf_token},
      success: function(data){
        contacts.ajax.reload();
        swal({
          title: 'Success!',
          text: 'Data has been deleted!',
          type: 'success',
          timer: '1500'
        })
      },
      error: function(){
        swal({
          title: 'Oops...',
          text: 'Something went wrong!',
          type: 'error',
          timer: '1500'
        })
      }
    });
  });
}

When I'll click to delete button:

enter image description here

Showing confirm model:

enter image description here

Then I'll click to cancel button. But after click to cancel button deleted data from database. And why are entries deleted in both cases?

Solution

  • You forgot to check the result of resolved promise:

    swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  cancelButtonColor: '#d33',
  confirmButtonColor: '#3085d6',
  confirmButtonText: 'Yes, delete it!'
}).then(function(result){
  

  if (result.value) {
    // perform the AJAX request
  }


});
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>

    Related example from the official docs: https://sweetalert2.github.io/#dismiss-handle