Bootbox确认对话框问题

Question

不幸的是，文档 Bootbox (http://paynedigital.com/2011/11/bootbox-js-alert-confirm-dialogs-for-twitter-bootstrap) 没有教如何调用确认对话框。根据文档，窗口总是在页面加载时出现，这是错误的。应该在点击删除按钮时调用。

以下是尝试而不成功的代码：

// show "false" does not work, the confirm window is showing when page is loaded.
$(function () {
bootbox.confirm("Confirm delete?", "No", "Yes", function(result) {
show: false
});     
});

// need show the confirm window when the user click in a button, how to call the confirm window?

<td><a class="icon-trash" onclick="bootbox.confirm();" href="{% url 'del_setor' setor.id %}" title="Delete"></a></td>

当点击删除按钮时，如何设置 bootbox 只会出现一次？谢谢！

编辑 - 解决方案：

$(function () {
$("a#confirm").click(function(e) {
    e.preventDefault();
    var location = $(this).attr('href');
    bootbox.confirm("Confirm exclusion?", "No", "Yes", function(confirmed) {
        if(confirmed) {
        window.location.replace(location);
        }
    });
});     
});

现在，当我点击“是”时，删除操作会起作用。 我已经要求插件的开发者将完整的示例放入文档中，这样用户就不需要创建帖子来询问如何在点击“是”时删除对象。 谢谢。

- LinuxMan

---

笑，笑 - 是的，这似乎是开发人员需要知道的东西。 - zero_cool

Answer 1

您可能想要查看此页面上“Basic Usage”下面的“Confirm”链接的源代码：http://bootboxjs.com/ 以下是摘录内容：

$("a.confirm").click(function(e) {
    e.preventDefault();
    bootbox.confirm("Are you sure?", function(confirmed) {
        console.log("Confirmed: "+confirmed);
    });
});

假设你所使用的UI中已经加载了jQuery，我建议避免在锚点标签中使用onClick属性。这只是我的个人意见。

- jstam

---

好的，谢谢您的回答！现在窗口出现了，但是当我点击“是”时，什么也没有发生，排除操作没有执行。 问候。 - LinuxMan

你可能需要检查JS控制台，看看是否有错误被抛出。没有看到你正在处理的代码，很难说是什么导致了问题。你能把它放到JSFiddle里吗？ - jstam

代码已发布，不必在jsfiddle上再次发布，因为我只有这段代码要显示。而且我没有一个可以删除的对象。 发生的事情很简单，我点击“是”，但对象并没有被删除，尽管在firebug中显示“removed：true”。在firebug中没有出现错误消息，只是没有删除该对象。谢谢。 - LinuxMan

Answer 2

我需要那个，但我改了一点东西...看看...

将此函数添加到您的全局“jQuery Ready”函数中，像这样：

$(document).on("click", "[data-toggle=\"confirm\"]", function (e) {
    e.preventDefault();
    var lHref = $(this).attr('href');
    var lText = this.attributes.getNamedItem("data-title") ? this.attributes.getNamedItem("data-title").value : "Are you sure?"; // If data-title is not set use default text
    bootbox.confirm(lText, function (confirmed) {
        if (confirmed) {
            //window.location.replace(lHref); // similar behavior as an HTTP redirect (DOESN'T increment browser history)
            window.location.href = lHref; // similar behavior as clicking on a link (Increments browser history)
        }
    });
});

只需在您的按钮或链接上添加一些"data-*属性"，如下所示：

<a class="btn btn-xs btn-default" data-toggle="confirm" data-title="Do you really want to delete the record 123?" href="/Controller/Delete/123"><span class="fa fa-remove"></span> </a>

所以……这样你可以有一个个性化的问题。对您的用户来说，这更直观......

你喜欢吗？！

查看演示：jsfiddle

- Rodolpho Brock

Answer 3

$(document).on("click", ".confirm-modal", function(e) {
    e.preventDefault();
    bootbox.confirm("Are You sure?", function(result) {
        if(result) {
            top.location.href = e.target.href;
        }
    });
});

- mdco

---

对于这么晚的回答，您应该添加解释。 - manuell

Answer 4

用于网格LinkButton的Aspx侧：

<asp:LinkButton ID="LinkButton2" runat="server" CommandName="DELETE"  
    OnClientClick="javascript:return DeleteConfirm(this,'Are you Sure?');" CausesValidation="False" Text="Delete" > Delete
</asp:LinkButton>

    function DeleteConfirm(btn, msg) 
    { 
            if(msg==''){msg='Are You Sure ? ';}

            if ($(btn).attr('confirmOK')=='1'){return true;}

              bootbox.confirm({
                    title: 'Confirm Popup',
                    message: msg,                   
                    callback: function(result) {
                             if (result) 
                             { 
                                $(btn).attr('confirmOK', '1');
                                 btn.click();
                             }
                             else{
                               $(btn).attr('confirmOK', '0');
                             }
                    }
                });

            return false;
     };

- Ali B.