启动对话框确认单击确认事件

Bootstrap dialog confirmation onclick confirmation event

本文关键字：确认 事件 单击 启动 对话框      更新时间：2023-09-26

我正在尝试编写自己的方法，调用BootstrapDialog并创建一个确认弹出框。如果用户选择"confirm"，那么该方法将返回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/

我不认为你真的想扩展BootstrapDialog。我不希望对话框返回任何东西，因为它将是异步操作的(它必须等待用户通过按下按钮来行动)。所以你需要通过它的回调与它交互。

我对bootstrap3-dialog不太熟悉，除了我刚刚看到的浏览它的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;
});

我是新的Bootstrap和发现Bootstrap -dialog只有两个小时前，所以我的答案是只值得什么是值得的…法语谚语，用英语怎么翻译?

?)

我很快就遇到了一个类似的问题:如何使用一个很好的引导确认来取代丑陋的javascript确认API上的提交按钮点击?…

正如KLenwel所说，confirm是一个同步API, bootstrap-dialog是一个异步API。你的线程只是不等待用户回复(或不回复)

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

这个代码示例是一个ASP。Net Webform页面，使用数据绑定给不可见按钮一个唯一的css类名，这样它就可以很容易地被javascript对话框回调触发。我确实使用了CssClass属性，而不是使用id属性。这只适用于ASP。净的原因。

<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(); } )" />

我有同样的问题，但我解决使用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); }
        }
    });
}

当结果为true时，应用程序将执行myFunction。正如你所看到的，myFunction是主函数中的一个参数。

你可以发送类型bootstrap, title和message作为参数。

例如:

showConfirmBootstrap("danger","Error","Do you want do this function?", "alert(5)")
相关文章：