等待 SweetAlert 响应

Question

我目前有一个功能，可以在更改下拉列表中的值时要求用户确认。使用标准 JavaScript confirm() 效果很好。这是 fiddle.

var prev_val;
$('#dropdownId').focus(function () {
    prev_val = $(this).val();
}).change(function () {
    $(this).blur();
    var success = confirm('Are you sure you want to change the Dropdown?');
    if (success) {
        // Proceed as normal.
    } else {
        // Reset the value & stop normal event
        $(this).val(prev_val);
        return false;
    }
});

但是当使用 SweetAlert 时，更改事件总是在我能够 confirm/cancel 之前发生。意思是，当我 select 一个新值并按下 "cancel" 时，它不会停止事件并重置先前的值。它与常规 JavaScript confirm 对话框一起使用。

var prev_val;
$('#' + dropdownId).focus(function () {
    prev_val = $(this).val();
}).change(function (e) {
    $(this).blur();
    return swal({
        title: "Are you sure?",
        text: "Do you want to change the dropdown?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        closeOnConfirm: true,
        closeOnCancel: true
    },
            function (isConfirm) {
                if (isConfirm) {
                    e.preventDefault();
                    return true;
                } else {
                    $(this).val(prev_val);
                    return false;
                }
            });
});

注意这个 JavaScript 甚至可能是无效的（对 JavaScript 来说很新），这可能也很有趣，例如从 confirm 函数返回和从 swal 函数返回无效。

然而，在谷歌搜索之后，我发现有人有类似的问题。

how-to-use-confirm-using-sweet-alert
how-to-run-a-sweetalert-instead-of-default-javascript-confirm-method

但这似乎有点老套，因为它阻止了任何操作，但是当 selecting 确认时，他重新创建了默认情况下应该调用的函数。对于如此简单的事情来说，这似乎是一个 hack。

SweetAlert 是否有可能像普通 confirm 对话框一样？

Answer 1

该值不会被设置回来，因为 swal 中的 this 不是 select，而是甜蜜的警报对话框。因此，在您的更改事件中，您必须定义一个变量来保存已更改的 select 元素，并在用户单击 'No'.

时使用它来设置值

.change(function(e) {
    var select = this; // save select element to variable

    $(this).blur();
    return swal({
        title: "Are you sure?",
        text: "Do you want to change the dropdown?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        closeOnConfirm: true,
        closeOnCancel: true
    },
    function(isConfirm) {
        if (isConfirm) {
            e.preventDefault();
            return true;
        } else {
            $(select).val(prev_val); // use select reference to reset value
           return false;
        }
    });
});

您可以在此 fiddle 中找到一个工作示例。

Answer 2

var prev_val;
$('#' + dropdownId).focus(function() {
  prev_val = $(this).val();
}).change(function(e) {
  $(this).blur();
  var self = this;
  return swal({
      title: "Are you sure?",
      text: "Do you want to change the dropdown?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes",
      cancelButtonText: "No",
      closeOnConfirm: true,
      closeOnCancel: true
    },
    function(isConfirm) {
      if (isConfirm) {

        // preventDefault is useless since change event has already happened 
        // if Confirm is true then do nothing else
        // change with prev val
        //e.preventDefault();
        return true;
      } else {

        // this here does not refer the dom element
        // it might be changed because it is called through the swal library code at a later time, use self which is declared out of the callback context.
        $(self).val(prev_val);
        return false;
      }
    });
});

等待 SweetAlert 响应

Wait on SweetAlert response

javascript

jquery

sweetalert