Javascript SweetAlert 单击“取消”按钮后调用代码

SweetAlert Calling code after clicking "Cancel" button

提问by Tomasz Waszczyk

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.

但我不能调用“取消点击”。我在文档中寻找，但找不到解决方案。

回答by Alessandro

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

您向swal构造函数传递了太多参数。它只需要两个：

swal(options, callback)

swal（选项，回调）

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

• 选项：设计警报的属性
• callback：管理事件的回调函数

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

• 输入字符串值：当用户按下确认
• false: 当用户按下取消

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

因此，您必须使用严格相等比较才能知道用户是否按下了取消或false在输入框中插入了字符串。

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.

希望对你有帮助，再见。

回答by Julio Vinachi

you can also use the implementation of promises using .then

您还可以使用 .then 来使用 promise 的实现

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