Bootbox.js回调函数中的触发方式

Question

伙计们，我有一个小问题，我正在做一个小的 spring 项目，在我的控制器中我有一个删除方法，我从我的 jsp 页面

调用

<a  onclick="return confirm('Are you sure ?');" href="${deleteUser}" >delete</a>

而且这个工作完美无缺，但它使用丑陋的默认确认对话框，我想让事情变得更有趣。所以我找到了 bootbox.js，并用它玩了一下。

虽然我可以显示对话框，但我找不到关于如何在 bootbox.js 的回调函数中调用方法的单一解释。

我添加了所有依赖项和这个脚本

  <script>
    $(document).on("click", ".alert", function(e) {
        bootbox.confirm({
            message: "Are you sure you want to delete this Account?",
            buttons: {
                confirm: {
                    label: 'Yes',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'No',
                    className: 'btn-danger'
                }
            },
            callback: function (result) {
               if(result==true){
                 href="${deleteUser}
               }
            }
        });
    });
</script>

我也将 link 更改为：

<a  class="alert" >delete</a>

就是这样，出现对话框，我选择了选项但没有任何反应，我知道我做错了什么，但我尝试的每个选项似乎都让我远离正确答案，任何人都可以编辑我的第二部分代码，以便我了解这实际上是如何工作的。

提前谢谢大家

Answer 1

由于 Bootbox 无法阻止执行线程，您必须阻止 link 执行它的请求。有两种方法：添加一个preventDefault，或者return false from the click event:

$(document).on("click", ".alert", function(e) {

    // do this...
    e.preventDefault();

    bootbox.confirm({
        message: "Are you sure you want to delete this Account?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {
           if(result==true){
             href="${deleteUser}"
           }
        }
    });

    // ... OR this (you don't need both)
    return false;
});

一旦你有了它，你就可以使用 AJAX 调用来执行 link 通常会执行的操作：

$(document).on("click", ".alert", function(e) {

    // do this...
    e.preventDefault();

    bootbox.confirm({
        message: "Are you sure you want to delete this Account?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {
            if(result) {
                var url = "${deleteUser}";

                $.post(url)
                    .done(function(response, status, jqxhr){
                        // post successful - do something?
                    })
                    .fail(function(jqxhr, status, error){
                        // post failed
                    });
            }
        }
    });

    // ... OR this (you don't need both)
    return false;
});

我假设 ${deleteUser} 生成一个 URL，您的后端可以对其进行分解以获得删除正确记录所需的数据；如果没有，您需要向 $.post 函数添加一个数据对象。

Answer 2

我找到了解决问题的方法，

如下：

 <script>
$(document).on("click", "#alert", function(e) {
     var addressValue = $(this).attr("href");
    e.preventDefault();

    bootbox.confirm({
        message: "Are you sure you want to delete this Account?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {

                if(result==true){

                      window.location = addressValue;


                }

        }

    });
});

重要的是使用 var addressValue = $(this).attr("href");要获得点击的 href 的值，请使用 e.preventDefault();停止默认操作，如果结果== true，稍后在回调函数中调用addressValue。

我测试过，效果很好。干杯

Bootbox.js回调函数中的触发方式

Triggering method in callback function of Bootbox.js

jsp

confirm

bootbox