How to Close Sweet Alert on Ajax Request Completion

Problem closing Sweet Alert popup and initiating another sweet alert popup via AJAX

var paymentPopupRef = null;
var paymentPopupTimerRef = null;
var paymentTimeInterval = 10000;

function updatePaymentPopupText() {
    if (!paymentPopupRef) { return; }
    paymentPopupRef.update({ text: `Please Check your Phone for a payment dialogue. I will close in ${parseInt(Swal.getTimerLeft() / 1000)} seconds` });
}

function openPaymentPopup() {
    paymentPopupRef = paymentPopupRef || Swal.fire({
        title: "Message Sent",
        text: `Please Check your Phone for a payment dialogue. I will close in ${parseInt(paymentTimeInterval / 1000)} seconds`,
        timer: paymentTimeInterval,
        onBeforeOpen: () => {
            paymentPopupTimerRef = setInterval(() => updatePaymentPopupText(), 1000);
        },
        onClose: () => {
            clearInterval(paymentPopupTimerRef);
            paymentPopupRef = paymentPopupTimerRef = null;
        }
    });
}

function closePaymentPopup() {
    (!paymentPopupRef) && paymentPopupRef.close()
}

function makePayment() {
    $.ajax({
        type: "POST",
        url: "payment",
        data: JSON.stringify({}),
        contentType: 'application/json',
        dataType: "json",
        success: function (response) {
            if (response == 'unpaid') {
                closePaymentPopup();
                Swal.fire({
                    title: "Ooops!",
                    text: "Transaction Cancelled, Please try again",
                    icon: "info",
                    button: "Try Again",
                });
            }
        }
    });
}

openPaymentPopup();
makePayment();

SweetAlert2 cancel button not clickable during ajax call

That's the behavior which will be changed in the next major release of SweetAlert2, you can track the progress here: https://github.com/sweetalert2/sweetalert2/issues/1501

For now, use Swal.getCancelButton().removeAttribute('disabled') as a workaround.

SweetAlert2 - Bind another event to cancel button?

You could create a custom html file and have a cancel button in that which will fire off you own cancel handler.

for example

<html> <!--custom.html-->      
  <button id="confirmBtn">confirm<button>
  <button id="cancelBtn">cancel<button>
<html>

$.get("custom.html", function (data) {
        swal({
            html: data,
            showCloseButton: false,
            showCancelButton: false,
            showConfirmButton: false
        });
        $("#cancelBtn").click(function () {
            //handle your cancel button being clicked
            $.when($.ajax({....})).then(function() {
                 // when all AJAX requests are complete
             });
        });
        $("#confirmBtn").click(function () {
            //handle your confirm button being clicked
        });
    });

You could just recall the popup on cancel.
Add this to your swal function.

function (dismiss) {
   if (dismiss === 'cancel') {
      swal({..});            
   }
}

So in full

swal({
   title: 'Swal Title',
   text: 'Your swal text',
   type: 'warning',
   showCancelButton: true,
   cancelButtonText: 'cancel'
}).then(function(){
   //Confirmed
}, function(dismiss){
   if(dismiss == 'cancel'){
      //swal({..}); //un-comment this line to add another sweet alert popup on cancel
   }
});

Sweet Alert - Ajax call without confirm button

You don't need to do anything special. Just make your ajax call after you display swal, and call swal again when your ajax is completed.

window.swal({  title: "Checking...",  text: "Please wait",  imageUrl: "images/ajaxloader.gif",  showConfirmButton: false,  allowOutsideClick: false});
//using setTimeout to simulate ajax requestsetTimeout(() => {  window.swal({    title: "Finished!",    showConfirmButton: false,    timer: 1000  });}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />

SweetAlert confirm with Ajax request

If I understand your question correctly, you are asking how to handle error condition in ajax request. Ajax settings has an error attribute and it can be used like this

$.ajax({
  .... other settings you already have
  error: function (xhr, ajaxOptions, thrownError) {
    swal("Error deleting!", "Please try again", "error");
  }
});

Also, you are invoking swal in a wrong way. Swal has a callback like this

swal({settings}, function(isConfirm){});

Overall code would 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/