Uncaught (in promise) cancel using SweetAlert2

uncaught (in promise) cancel axios
sweetalert2 cancel event
sweet alert 2 cancel button event
sweetalert2 promise
sweetalert2 form
sweetalert2 timer
sweetalert loading
jquery uncaught (in promise)

how do I properly escape the cancel button without throwing an error when using promises? My code throws an alert confirmation with a required checkbox. the code executes as it should to the user, but it throws an error in the console window:

Uncaught (in promise) cancel

//validation logic all passes...Now proceed to...

 else
    {

//determine and parse Discounts

 var myLookup = document.getElementsByName("myLookup")[0].value;
$.post( "findthem.php", {myLookup: myLookup })
  .done(function(json_data){
     var theResponse1 = $.parseJSON(json_data);
     myDiscountRate = theResponse1['ourDiscountFound'];

    }).then( function(callback){

    priceRate = priceRate * (1 - (.01 * myDiscountRate));
    newRate = priceRate.toFixed(2);
}

swal({
  title: "Confirm",
  input: 'checkbox',
  inputValue: 0,
  type: "warning",
  inputPlaceholder: 'I agree to <a href="#blahblahMore"></a> Your new Rate is :'+newRate,
  showCancelButton: true,
  confirmButtonText: 'Confirm',
  showLoaderOnConfirm: true,
  preConfirm: function(result) {
    return new Promise(function(resolve, reject) {
      if (result) {
        $.post("my.php", {
          Data: data
        })
        .done(
          function(json_data) {
            var data_array = $.parseJSON(json_data);
            var moreDetails = '';
            var resulting = 'error';
            var details = "Transaction Declined"
            if (data_array["trxApproved"] == true) {
              resulting = 'success';
              details = "Confirmed"
              moreDetails = "<br>Approved<b>" + data_array["approved"] + "</b>" +
                "<br>Details Code: <b>" + data_array["detailsCode"] + "</b>";
            }
            swal({
              type: resulting,
              title: details,
              html: "<h1>Details: </h1>" + data_array["messagetext"] + moreDetails
            });
          }
        );
        resolve();
      } else {
          reject('You must agree to our Terms & Conditions ');
      }
    });
  },
  allowOutsideClick: false
  }).then(function(json_data) {

  })
});

Update (Jan 2017): This issue has been fixed in v7: v7 upgrade guide ↗


You need to add a rejection handler to the Promise. Alternatively, you can use .catch(swal.noop) as a quick way to simply suppress the errors:

swal('...')
  .catch(swal.noop);

PS. the package you're using is called SweetAlert2, not SweetAlert. In future questions please mention it so you can get more relevant answers.

Uncaught (in promise) esc (or cancel) · Issue #221 · sweetalert2 , When pressing cancel or esc when using ajax with swal2, we get a Uncaught (in promise) esc (or cancel) error. See jsfiddle. Anyone got an  When pressing cancel or esc when using ajax with swal2, we get a Uncaught (in promise) esc (or cancel) error.


SweetAlert2 rejects the result promise when the cancel button is pressed. You can handle that:

swal({
  …
}).then(function(json_data) {
  …
}, function(dismiss) {
  if (dismiss === 'cancel') { // you might also handle 'close' or 'timer' if you used those
    // ignore
  } else {
    throw dismiss;
  }
})

If you don't need to do anything with the json_data, you might also use the catch method.

Cancel button calls resolve · Issue #175 · sweetalert2/sweetalert2 , Yes, it's proper Promise but for historical reasons confirm and cancel buttons are calling resolve(isConfirm). isConfirm will be: true for "Confirm"-  javascript - swal - sweetalert2 form . Uncaught(in promise) cancel using SweetAlert2 Uncaught (in promise) cancel //validation logic all passes


new Promise(function(resolve, reject) { is not necessary. $.post() returns a jQuery promise object.

Possible solution substitutes Promise.reject() for new Promise() constructor; removed .then() that was placed as an option to first swal() call; pattern appears to expect a Promise to be returned from preConfirm, though not certain what value is expected to be returned from .done() other than json_data.

swal({
  title: "Confirm",
  input: 'checkbox',
  inputValue: 0,
  type: "warning",
  inputPlaceholder: 'I agree to <a href="#blahblahMore"></a>',
  showCancelButton: true,
  confirmButtonText: 'Confirm',
  showLoaderOnConfirm: true,
  preConfirm: function(result) {
      if (result) {
        return $.post("my.php", {
          Data: data
        })
        .done(
          function(json_data) {
            var data_array = $.parseJSON(json_data);
            var moreDetails = '';
            var resulting = 'error';
            var details = "Transaction Declined"
            if (data_array["trxApproved"] == true) {
              resulting = 'success';
              details = "Confirmed"
              moreDetails = "<br>Approved<b>" + data_array["approved"] + "</b>" +
                "<br>Details Code: <b>" + data_array["detailsCode"] + "</b>";
            }
            swal({
              type: resulting,
              title: details,
              html: "<h1>Details: </h1>" + data_array["messagetext"] + moreDetails
            });
          }
        );
      } else {
          return Promise.reject('You must agree to our Terms & Conditions ');
      }
  },
  allowOutsideClick: false
});

Uncaught (in promise) cancel using SweetAlert2, how do I properly escape the cancel button without throwing an error when using promises? My code throws an alert confirmation with a required checkbox. the  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.


Adding catch(swal.noop); at the end swal function will solve this problem

For example:

swal({

}).then(function() {

}).catch(swal.noop);

Uncaught (in promise) cancel using SweetAlert2 at AllInOneScript , how do I properly escape the cancel button without throwing an error when using promises? My code throws an alert confirmation with a  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.


you will need to catch the action for cancel

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then(function(json_data) {
  //delete item
}, function(dismiss) {
  if (dismiss === 'cancel' || dismiss === 'close') {
    // ignore
  } 
})

Sweet Alert: Create a Promise! > JavaScript for PHP Geeks , how do I properly escape the cancel button without throwing an error when using promises? My code throws an alert confirmation with a required checkbox. the  To avoid this, add a rejection handler to the Promise. Alternatively, you can use .catch(swal.noop) as a quick way to simply suppress the errors: swal().catch(swal.noop) birjolaxew closed this Oct 16, 2016


SweetAlert: Killing it with Promises > JavaScript for PHP Geeks , This will tell SweetAlert when your work is done so that it knows when it's ok to Inside, return a new Promise with the familiar resolve and reject arguments:. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.


SweetAlert, And you can customize it in a lot of ways, like having a "Yes" and "Cancel" button. We're going to use SweetAlert so that when we click the delete icon, an alert  The problem is that you should generally never call a function that returns a promise without doing something with that promise. In this case the promise-returning functions are swal and $.post. If you ignore the returned promise then you're not waiting for it to complete. Your then handlers can return a promise to continue the promise chain


SweetAlert uses promises to keep track of how the user interacts with the alert. By setting buttons (plural) to true , SweetAlert will show a cancel button in  Ads injected into examples are only shown on this page, they are not the part of SweetAlert2's codebase and you will not have them when using SweetAlert2 for your projects. Contribute Feel free to fork SweetAlert2 on GitHub if you have any features that you want to add!