SweetAlert2 Cancel button not working properly

Question

I have a Yes and No button in my SweetAlert2. When I click on No it does a post to a method but I just want it to close the SweetAlert.

Here is the code I have written:

   $('.js-update-details-click').click(function () {

        var Id = Number($(this).data('result-id'));

        swal({
            title: 'Are you sure you want to ask the User to update their details?',
            type: 'warning',
            showCancelButton: true,
            closeOnConfirm: false,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
            confirmButtonClass: 'btn btn-success btn-full-width mar-bot-5',
            cancelButtonClass: 'btn btn-danger btn-full-width mar-bot-5',
            buttonsStyling: false
        })
            .then(function (isconfirm) {
                if (isconfirm) {
                    $.ajax({
                        type: "POST",
                        url: '/Common/ComposeUpdateDetailsEmail',
                        data: { ReplyType: 'CleanUpdateDetails', Id: Id },
                        success: function (data) {
                            swal('User has been sent an email to Update their Details.')
                        }
                    });
                }
            });
    }
    );

just to confirm - are you using https://github.com/t4t5/sweetalert or https://github.com/sweetalert2/sweetalert2? — Limon Monte, Mar 28 '18 at 09:03

Limon Monte · Answer 1 · 2020-12-23T17:34:24.827

11

Most probably you updated the sweetalert2 dependency to ^7.0.0 and didn't read the release notes with breaking changes: https://github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0

Starting from v7.0.0, SweetAlert2 will fulfill the promise for both confirm and cancel buttons and you need to handle the response from it this way:

Swal.fire({
  ...
}).then(function (result) {
  if (result.value) {
    // handle confirm
  } else {
    // handle cancel
  }
})

edited Dec 23 '20 at 17:34

answered Mar 28 '18 at 10:12

Limon Monte

52,539
45
182
213

I changed isconfirm to result in function and if statement and it worked. Cheers for that! – S.zaid Mar 28 '18 at 11:24
Glad to help! Don't forget to accept the my answer :) – Limon Monte Mar 28 '18 at 11:35

score 1 · Answer 2 · answered Oct 29 '19 at 22:33

Reference:

https://jsfiddle.net/ad3quksn/199/

`

swal({
  title: 'Input something',
  type: 'question',
  input: 'text',
  showCancelButton: true
}).then(
  result => {
    if (result.value) {
      swal({
        type: 'success',
        html: 'You entered: <strong>' + result.value + '</strong>'
      })
    } else {
      console.log(`dialog was dismissed by ${result.dismiss}`)
    }
  }
);

`

It shows with an output example of how to handle the promise as of v7.0.0: it helped me understand better!

score 0 · Answer 3 · answered Jun 27 '20 at 05:00

0

Maybe help you :

swal("you liked it",{ buttons:{cancel:false,confirm:false}, timer:1000, })

ref : https://github.com/t4t5/sweetalert/issues/763

answered Jun 27 '20 at 05:00

Javad Asoodeh

299
3
12

SweetAlert2 Cancel button not working properly

3 Answers3