twitter-bootstrap Bootstrap 对话框确认 onclick 确认事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25087883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap dialog confirmation onclick confirmation event
提问by Sixthpoint
I am trying to write my own method that calls the BootstrapDialog and creates a confirmation popup. If the user selects "confirm" then the method will return true and continue to call the jsf action. The code I have so far:
我正在尝试编写自己的方法来调用 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;
};
I am calling the js like so:
我像这样调用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');"/>
The dialog pops up just fine, the issue is that it is not returning true / false. I have modeled my js after this example: http://nakupanda.github.io/bootstrap3-dialog/
对话框弹出得很好，问题是它没有返回真/假。我在这个例子之后为我的 js 建模：http: //nakupanda.github.io/bootstrap3-dialog/
采纳答案by klenwell
I don't think you really want to extend BootstrapDialog. And I wouldn't be expecting the dialog to return anything, since it's going to be operating asynchronously (it has to wait for the user to act by pressing a button.) So you need to interact with it through its callbacks.
我不认为你真的想扩展BootstrapDialog。而且我不希望对话框返回任何内容，因为它将异步操作（它必须等待用户通过按下按钮来执行操作）。因此您需要通过其回调与它进行交互。
I'm not familiar with bootstrap3-dialogbeyond what I just saw skimming its Github page so it may offer you additional callbacks or events to do this more neatly. But I think this will accomplish roughly what you're after:
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;
});
回答by Rikou
I am new with Bootstrap and discovered bootstrap-dialog only two hours ago, so my answer is only worth what it's worth... (french saying, how does it translate in english ? ?)
我是 Bootstrap 的新手，仅在两个小时前才发现 bootstrap-dialog，所以我的回答只值它的价值......（法语说，它是如何翻译成英语的？？）
I quickly ran in a similar problem : how to use a nice bootstrap confirm to replace the ugly javascript confirm API on submit button click?...
我很快就遇到了类似的问题：如何在提交按钮单击时使用一个不错的引导程序确认来替换丑陋的 javascript 确认 API？...
As KLenwel said, confirm is a synchronous API, bootstrap-dialog is an asyncronous one. Your thread just doesn't wait for the user answer to post back (or not.)
正如 KLenwel 所说，confirm 是一个同步 API，bootstrap-dialog 是一个异步 API。您的线程不会等待用户回复（或不回复）。
I used a secondary button to popup the confirm dialog. The real submit button being hidden. The Bootstrap-dialog confirm fires the click of the submit button, preserving both the javascript submit handler and the http header sent to the server.
我使用了一个辅助按钮来弹出确认对话框。真正的提交按钮被隐藏。Bootstrap 对话框确认触发提交按钮的点击，同时保留 javascript 提交处理程序和发送到服务器的 http 标头。
This code example is an extract of a ASP.Net Webform page, using databinding to give a unique css class name to the invisible button so it can easily be triggered by the javascript dialog callback. I did use the CssClass property, not use the id property. This is only for ASP.Net reasons.
此代码示例是 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(); } )" />
The same thing, in pure HTML, ASP.Net WebForms independant (uses the control's id) :
同样的事情，在纯 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(); } )" />
回答by David Medina
i had the same question, but i solved using eval(). The function is
我有同样的问题，但我使用 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); }
}
});
}
When the result is true, the app will do myFunction. How you are seeing, myFunction is a parameter in the main function.
当结果为真时，应用程序将执行 myFunction。你怎么看， myFunction 是主函数中的一个参数。
You may send the type bootstrap, title and message as parameters.
您可以将类型引导程序、标题和消息作为参数发送。
An example is:
一个例子是：
showConfirmBootstrap("danger","Error","Do you want do this function?", "alert(5)")
