Question

我有一个小问题的人，我正在做一个小春天项目，在我的控制器中我有一个删除方法，我从我的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>

我也改变了我的链接：

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

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

提前谢谢大家

Answer 1

由于Bootbox无法阻止执行线程，因此必须阻止链接执行它的请求。有两种方法：添加preventDefault，或从click事件返回false：

$(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调用来执行链接通常具有的操作：

$(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（＆＃34; href＆＃34;）;要获得clicked href的值，请使用e.preventDefault（）;停止默认操作，稍后在回调函数中调用addressValue，如果结果为== true。

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

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

2 个答案: