SweetAlert confirms Ajax request
I'm new to Javascript - coding it first. I am trying to make a delete confirmation button using SweetAlert . Nothing happens when I click the button onclick="confirmDelete()"
. This code might just be a crab, but here it is:
<script type="text/javascript">
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
)},
$.ajax({
url: "scriptDelete.php",
type: "POST",
data: {id: 5},
dataType: "html",
success: function () {
swal("Done!","It was succesfully deleted!","success");
}
});
}
</script>
<a href="#" onclick="confirmDelete()">Delete</a>
Can I add a warning if the deletion fails?
source to share
If I understand your question correctly, you are asking how to handle an error condition in an ajax request. Ajax settings have an error attribute and it can be used like
$.ajax({
.... other settings you already have
error: function (xhr, ajaxOptions, thrownError) {
swal("Error deleting!", "Please try again", "error");
}
});
Also, you are using the wrong swal method. Swal has a callback like this
swal({settings}, function(isConfirm){});
The general code will look something like this.
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function (isConfirm) {
if (!isConfirm) return;
$.ajax({
url: "scriptDelete.php",
type: "POST",
data: {
id: 5
},
dataType: "html",
success: function () {
swal("Done!", "It was succesfully deleted!", "success");
},
error: function (xhr, ajaxOptions, thrownError) {
swal("Error deleting!", "Please try again", "error");
}
});
});
}
Here is a demo http://jsfiddle.net/dhirajbodicherla/xe096w10/33/
source to share
Try this code. It works great for me.
$('.delete-confirm').on('click', function() {
var postID = $(this).val();
console.log(postID);
swal({
title: "Are you sure?",
text: "If you delete this post all associated comments also deleted permanently.",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
}, function() {
setTimeout(function() {
$.post("delete.php", {
id: postID
},
function(data, status) {
swal({
title: "Deleted!",
text: "Your post has been deleted.",
type: "success"
},
function() {
location.reload();
}
);
}
);
}, 50);
});
});
source to share
You're wrong about swal({)}
, it must beswal({})
Updated code:
<script type="text/javascript">
function confirmDelete() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(isConfirm){
if (isConfirm) {
$.ajax({
url: "scriptDelete.php",
type: "POST",
data: {id: 5},
dataType: "html",
success: function () {
swal("Done!","It was succesfully deleted!","success");
}
});
}else{
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
})
}
</script>
source to share
I finally got this to work for one dude after 3 years.
function dropConfig(config_index){
swal({
title: "WARNING:",
text: "Are you sure you want to delete this connection?",
type: "warning",
inputType: "submit",
showCancelButton: true,
closeOnConfirm: true,
timer: 2000
}, //end swal }
function(isConfirm) {
if (isConfirm == true) {
//do the ajax stuff.
$.ajax({
method: "POST",
url: "/drop_config",
data: {"curr_config": $("#curr_conf_conn_name_" + config_index).val()}})
.success(function(msg) {
show_notification(msg,"success");
setInterval(function() {.reload();
}, 2500);})
.error(function(msg) {show_notification(msg.responseText,"danger");});
} // end if }
}); // end function } & end swal )
} // end function }
source to share