Bootstrap对话框点击确认事件的确认。

Question

Bootstrap对话框点击确认事件的确认。

javascriptjquerytwitter-bootstrapbootstrap-dialog

4

我正在尝试编写自己的方法，调用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/

- Sixthpoint

3个回答

0

我刚接触Bootstrap，只在两个小时前发现了bootstrap-dialog，所以我的答案只有它的价值...（法语谚语，英文怎么翻译？）

我也遇到了类似的问题：如何使用漂亮的Bootstrap确认框来替换提交按钮点击时丑陋的JavaScript确认API？...

就像KLenwel所说，confirm是同步API，而bootstrap-dialog是异步的。您的线程不会等待用户回答后再返回（或不返回）。

我使用了一个辅助按钮来弹出确认对话框。真正的提交按钮被隐藏了。Bootstrap-dialog确认触发了提交按钮的单击事件，同时保留了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(); } )" />

- Rikou

0

我曾经有同样的问题，但是我使用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是主函数中的参数。

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

例如：

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

- David Medina

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- klenwell · Accepted Answer

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