CODEWITHSUNDEEP
javascriptangularjssweetalert
Tomasz Waszczyk
Tomasz Waszczyk

Reputation: 3129

SweetAlert Calling code after clicking "Cancel" button

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.

Upvotes: 13

Views: 53299

Answers (2)

Julio Vinachi
Julio Vinachi

Reputation: 388

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();
  } 
});

Upvotes: 2

Alessandro
Alessandro

Reputation: 4472

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.

Upvotes: 15

Related Questions