Reputation: 5004
Hello everyone! I'm starter in javascript. I use Laravel + DataTables in my project. Now I use sweetalert2 instead of default confirms javascript.
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:
Showing confirm model:
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?
Upvotes: 1
Views: 66
Reputation: 54379
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
Upvotes: 1