引导对话框确认 onclick 确认事件答案

【问题标题】：Bootstrap dialog confirmation onclick confirmation event引导对话框确认 onclick 确认事件
【发布时间】：2014-08-01 20:06:32
【问题描述】：

我正在尝试编写自己的方法来调用 BootstrapDialog 并创建一个确认弹出窗口。如果用户选择“确认”，则该方法将返回 true 并继续调用 jsf 操作。我到目前为止的代码：

 /**
 * Confirm window
 *
 * @param {type} message
 * @param {type} callback
 * @returns {undefined}
 */
BootstrapDialog.confirmation = function(title, message) {

    var callback = function(result) {
        console.log(result);
        return result;
    };

    var b = new BootstrapDialog({
        title: title,
        message: message,
        closable: false,
        data: {
            'callback': callback
        },
        buttons: [{
                label: 'Cancel',
                action: function(dialog) {
                    typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(false);
                    dialog.close();
                }
            }, {
                label: 'Continue',
                cssClass: 'btn-primary',
                action: function(dialog) {
                    typeof dialog.getData('callback') === 'function' && dialog.getData('callback')(true);
                    dialog.close();
                }
            }]
    }).open();


    return callback;


};

我是这样调用js的：

<h:commandButton type="button" value="Exit" action="myaction" styleClass="btn btn-default" onclick="return BootstrapDialog.confirmation('Data unsaved', 'Are you sure you want to continue');"/>

对话框弹出就好了，问题是它没有返回真/假。我在这个例子之后建模了我的 js：http://nakupanda.github.io/bootstrap3-dialog/

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-dialog

【解决方案1】：

我不认为你真的想扩展BootstrapDialog。而且我不希望对话框返回任何内容，因为它将异步操作（它必须等待用户通过按下按钮进行操作。）所以你需要通过它的回调与它进行交互。

我对@987654322@ 并不熟悉，除了我刚刚在其 Github 页面上看到的内容之外，它可能会为您提供额外的回调或事件以更整洁地执行此操作。但我认为这将大致完成您所追求的：

function letUserExit() {
    // Add code here to redirect user where she expects to go 
    // when pressing exit button or to submit a form or whatever.
}

var exitConfirmDialog = new BootstrapDialog({
    title: 'Data unsaved',
    message: 'Are you sure you want to continue?',
    closable: false,
    buttons: [
        {
            label: 'Cancel',
            action: function(dialog) {
                dialog.close();
            }
        },
        {
            label: 'Continue',
            cssClass: 'btn-primary',
            action: function(dialog) {
                letUserExit();
            }
        }
    ]
});

// Add event to invoke dialog to your exit button here
$('button.exit').on('click', function() {
    // Show or open? Not quite sure what difference is. Use the one
    // that's most appropriate.
    exitConfirmDialog.show();

    // Stop any events (like a form being submitted or user being
    // redirected.) Need to wait until user responds to modal and
    // have event take place then.
    return false;
});

【讨论】：

这在等待确认的情况下仍然会造成问题，因为这需要同步任务。我正在尝试像 javascript 确认消息一样获得此功能
@Sixthpoint 我不明白您所说的“等待确认的情况，因为这需要同步任务”。这应该像 javascript 确认一样起作用。
所以通过在 letUserExit() 中添加一个 return true 可以在我的 jsf 的 onclick 事件的情况下工作？
Javascript 的 confirm 会暂停浏览器，直到用户采取行动。这就是为什么它能够被同步处理。 Bootstrap 的对话并非旨在以这种方式运行。例如，当对话框出现时，用户仍然可以点击页面的其他部分，这是原生确认对话框无法做到的。问题是当用户点击继续并确认意图时，您希望发生什么。重定向到另一个页面？提交表格？这就是您在letUserExit 中输入的内容（或直接在继续按钮回调中）。
另外一个注意事项：您可能需要让退出按钮单击回调返回 false，这样任何事件（例如提交表单）都不会传播。（我将更新我的代码。）您希望在用户确认后发生的任何事件都需要放在 Continue 回调中。按钮本身应该真的只是打开引导模式。

【解决方案2】：

我是 Bootstrap 的新手，两个小时前才发现 bootstrap-dialog，所以我的回答只值它的价值......（法语说，它是如何翻译成英文的？？）

我很快遇到了一个类似的问题：如何在点击提交按钮时使用一个不错的引导程序确认来替换丑陋的 javascript 确认 API？...

正如 Klenwel 所说，confirm 是一个同步 API，bootstrap-dialog 是一个异步 API。您的线程只是不等待用户回答回发（或不回发）。

我使用辅助按钮弹出确认对话框。真正的提交按钮被隐藏。 Bootstrap 对话框确认触发点击提交按钮，同时保留 javascript 提交处理程序和发送到服务器的 http 标头。

此代码示例是 ASP.Net Webform 页面的摘录，使用数据绑定为不可见按钮提供唯一的 css 类名称，以便可以轻松地由 javascript 对话框回调触发。我确实使用了 CssClass 属性，而不是使用 id 属性。这只是出于 ASP.Net 的原因。

<asp:Button style="display: none" runat="server" CssClass='<%# Eval( "Id" ) %>' OnCommand="Delete" CommandName='<%# Eval( "Id" ) %>' />
<input type="button" class="btn btn-danger" value="Delete" onclick="BootstrapDialog.confirm('Delete?', function(ok) {if(ok) $('.<%# Eval( "Id" ) %>').click(); } )" />

同样的事情，在纯 HTML 中，ASP.Net WebForms 独立（使用控件的 id）：

<input type="submit" style="display: none" id="TheSubmitButton" onclick="alert('ok, submit will be fired');" />
<input type="button" title="Delete" data-placement="bottom" class="btn btn-danger" value="Delete" onclick="BootstrapDialog.confirm('Delete?', function(ok) {if(ok) $('#TheSubmitButton').click(); } )" />

【讨论】：

【解决方案3】：

我有同样的问题，但我使用 eval() 解决了。功能是

function showConfirmBootstrap(type,title,mesagge, myFunction){

    BootstrapDialog.confirm({
        size: "size-small",
        type: "type-"+type, 
        title: title,
        message: mesagge,
        cssClass: 'delete-row-dialog',
        closable: true,
        callback: function(result) {
            if(result) { eval(myFunction); }
        }
    });
}

当结果为真时，应用程序将执行 myFunction。你怎么看，myFunction是main函数中的一个参数。

您可以发送类型引导程序、标题和消息作为参数。

一个例子是：

showConfirmBootstrap("danger","Error","Do you want do this function?", "alert(5)")

【讨论】：