Vikram Vikram - 12 days ago 10
jQuery Question

How to Add Ajax Call with sweet alert

My Ajax method looks like this

$.post(url,{
ajax_call:"putDonation",
addresse:addresse,
phone:phone,
email:email,
name:name,
amount:amount,
amountinwords:amountinwords
}).done(function(data){

console.log(data);

var arr = [];

try {
var str = "";
//convert to json string
arr = $.parseJSON(data); //convert to javascript array
$.each(arr,function(key,value){
str +="<li>"+value+"</li>";
});
alert(str);
$(".alert-danger").show();
$("#error").html(str);

} catch (e) {
swal("Jay Gayatri !", 'Donation Sucessful', "success")
$("#donation")[0].reset();
}


})


I want to show a sweet Alert Warning popup something like this one

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(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});


And if they click the cancel it should not do the ajax call , If they select yes then only the call should happen

So can any one tell me how can I embed the Ajax method inside
Sweet Alert
methods

Thanks

Answer

For a quick example i can show you how i did it on my site. I put the Ajax call inside the sweet alert.

  function deleteorder(orderid) {
    swal({
      title: "Are you sure?", 
      text: "Are you sure that you want to cancel this order?", 
      type: "warning",
      showCancelButton: true,
      closeOnConfirm: false,
      confirmButtonText: "Yes, cancel it!",
      confirmButtonColor: "#ec6c62"
    }, function() {
        $.ajax(
                {
                    type: "get",
                    url: "/admin/delete_order.php",
                    data: "orderid="+orderid,
                    success: function(data){
                    }
                }
        )
      .done(function(data) {
        swal("Canceled!", "Your order was successfully canceled!", "success");
        $('#orders-history').load(document.URL +  ' #orders-history');
      })
      .error(function(data) {
        swal("Oops", "We couldn't connect to the server!", "error");
      });
    });

So the ajax call only gets made if you press the confirm button. I hope this can help you to arrange your code the way you need it.