SweetAlert Calling code after clicking "Cancel" button

Question

I have written following code, I want to call a code under "Cancel" button:

vm.saveGroup = function(){
    SweetAlert.swal({
        title: "Name this Device Group",
        text: "Please provide a name that you want your device group to be saved under. Also, make sure that you already specified all needed filters before you save the list.",
        type: "input",
        showCancelButton: true,
        closeOnConfirm: false,
        showLoaderOnConfirm: true,
        inputPlaceholder: "Device Group name"
    },
    function(inputValue){
        if (inputValue === false) {
            return false;
        }
        if (inputValue === "") {
            /*eslint-disable */
            swal.showInputError("You need to write something!");
            /*eslint-enable */
            return false;
        }

        deviceGroupsFactory.saveGroup(inputValue, vm.filterOutput)
            .then(function(response){
                if (response.status == 200){
                    SweetAlert.swal("Device Group saved!", "You should now see your device group on the list.", "success");
                    $state.go('main.template.devices.groups');
                }
                else {

                    SweetAlert.swal("Error!", response.statusText, "error");

                  console.log('xxx');
                }
            });
    });

}

but I cannot call "cancel clicked". I was looking for in docs but cannot find the solution.

I had a quick look at the sparse docs for sweetalert, and although not definitive, I didn't see any example that accepts [obj, func, func] like you are passing in. Are you sure that works? — James, Jul 06 '17 at 15:29

Alessandro · Accepted Answer · 2019-03-15T12:36:44.967

You're passing too many parameters to the swal constructor. It needs only two:

swal(options, callback)

options: Attributes to design the alert
callback: The callback function to manage the events

When you use a simple confirm, the callback receive only one parameter that indicates the user choice:

true: Confirm
false: Cancel

With inputbox you will receive the user's input string as parameter.

When you merge together inputbox and confirm, you could receive:

the input string value: When the user press Confirm
false: When user press Cancel

So, you have to use the Strict Equality Comparison in order to know if user pressed cancel or have inserted the string false in the input box.

Please see the following simple example:

swal({
  title: "Are you sure?",
  text: "Press CANCEL, please!",
  type: "input",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "CONFIRM",
  cancelButtonText: "CANCEL",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(inputValue){
  //Use the "Strict Equality Comparison" to accept the user's input "false" as string)
  if (inputValue===false) {
    swal("Well done!");
    console.log("Do here everything you want");
  } else {
    swal("Oh no...","press CANCEL please!");
    console.log("The user says: ", inputValue);
  }
});

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

I hope it helps you, bye.

Thanks for Your answer. In Your's solution I see one important issue, in order to Cancel (close modal window) user needs to click two times. Is it possible to close modal windows just after click Cancel button without execution of "swal("Well done!");" ? — Tomasz Waszczyk, Jul 06 '17 at 16:26

Julio Vinachi · Answer 2 · 2021-05-31T07:05:55.240

2

you can also use the implementation of promises using .then

I give you an example, this would be executed just after pressing the button

swal( 'Error!',valido.msj,'error').then((e)=>{
  if( valido.msj=="Enlace de botón No Válido" ){
     document.getElementById('link_btn_barra').focus();
  } 
});

edited May 31 '21 at 07:05

answered Dec 08 '18 at 06:19

Julio Vinachi

381
4
8

SweetAlert Calling code after clicking "Cancel" button

2 Answers2