首页 文章

如何运行SweetAlert而不是默认的javascript确认方法

提问于
浏览 次
4

目前这是我用来运行基于“确认”类的正常确认窗口的代码 . 这一切都是通过href链接完成的，而不是onClick事件按钮 . 由于点击的结果是运行另一个被剪切的代码放在另一个文件中（意图删除db中的一行） .

$('.confirmation').on('click', function () {
        return confirm('Er du sikker på at du vil slette?');
    });

我想要的是用这个SweetAlert函数替换confirm方法

swal({   
	title: "Are you sure?",   
	text: "You will not be able to recover this imaginary file!",  
	type: "warning", 
	showCancelButton: true,   
	confirmButtonColor: "#DD6B55",   
	confirmButtonText: "Yes, delete it!",   
	closeOnConfirm: false 
}, function(){   
	swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
});

任何人都知道如何做到这一点，当我尝试将sweetalert放在onClick函数中时会发生什么，警报会出现，但它会自动删除该行而不必确认任何内容，警报会消失 .

javascript jquery sweetalert

6 回答

  • -1

    我找到了解决方案！

    $('.confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
warnBeforeRedirect(linkURL);
});

 function warnBeforeRedirect(linkURL) {
    swal({
      title: "Leave this site?", 
      text: "If you click 'OK', you will be redirected to " + linkURL, 
      type: "warning",
      showCancelButton: true
    }, function() {
      // Redirect the user
      window.location.href = linkURL;
    });
  }
    回复于
  • 0

    我做了这个codepen以防任何人想要调试 . 它似乎正在工作（检查浏览器控制台日志何时打印'done'）http://codepen.io/connorjsmith/pen/YXvJoE

    $('.confirmation').on('click', function(){
  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
  },
  function(isConfirm){
    if (isConfirm) {
      console.log('done');
      swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
  });
})
    回复于
  • 10

    添加 event.preventDefault(); preventDefault();

    $('.confirmation').on('click', function (event) {
         event.preventDefault();
       swal({   
        title: "Are you sure?",   
        text: "You will not be able to recover this imaginary file!",  
        type: "warning", 
        showCancelButton: true,   
        confirmButtonColor: "#DD6B55",   
        confirmButtonText: "Yes, delete it!",   
        closeOnConfirm: false 
    }, function(){   
        swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
    });

   });
    回复于
  • 2

    试试这个在docs中提到的代码：

    $('.confirmation').on('click', function () {
    swal({   
         title: "Are you sure?",   
         text: "You will not be able to recover this imaginary file!",  
         type: "warning", 
         showCancelButton: true,   
         confirmButtonColor: "#DD6B55",   
         confirmButtonText: "Yes, delete it!",   
         closeOnConfirm: false 
    }, function(isConfirm){   
           return isConfirm; //Will be either true or false
    });
});
    回复于
  • 0

    我写了这个函数：

    function sweetConfirm(title, text) {
        event.preventDefault();
        var target = $(event.target);
        var href = null;
        var form = null;

        if (target.is("a")) href = target.attr("href");
        else if (target.is("button:submit")) form = target.closest("form");
        else if (target.is("button")) href = target.attr("href") || target.attr("value");

        swal({
            title: title,
            text: text,
            type: "warning",
            allowOutsideClick: true,
            showCancelButton: true
        }, function () {
            if (href) window.location.href = href;
            else if (form) form.submit();
        });
    }

    sweetConfirm 函数将接受提交按钮，链接按钮或正常按钮，并会在执行操作之前询问 .

    您可以在以下方案中使用它：

    <a type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
    Link Button 1
</a>

<button type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
    Link Button 2
</button>

<form action="/" method="DELETE">
    <input type="hidden" name="id" value="..">
    <button type="submit" class="btn btn-danger" onclick="return sweetConfirm('Are you sure?')">
        Delete
    </button>
</form>
    回复于
  • 0
    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@7.32.4/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.32.4/dist/sweetalert2.all.min.js"></script>
</head>
<body>

    <a id="confirmation" href="test">Test</a>

    <script type="text/javascript">
        $('#confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
console.log(linkURL)
warnBeforeRedirect(linkURL);
});

        function warnBeforeRedirect(linkURL) {
            Swal({
                title: 'sAre you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    window.location.href = linkURL;
                }
            })

        }



    </script>

</body>
</html>
    回复于

相关问题