javascript - Bootstrap 对话框确认 onclick 确认事件

Question

我正在尝试编写自己的方法来调用 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');"/>

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

Answer 1

我不认为你真的想要扩展 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;
});