BootstrapDialog 在另一个函数中确认不起作用

Question

我使用 BootstrapDialog 库来显示模态对话框、警报和确认消息我在另一个函数中使用 BootstrapDialog.confirm 方法重用一些参数，如按钮文本、消息文本等....为此我编写了用于测试目的的波纹管代码，但函数不是 return 任何东西总是 return undefined.

 <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" rel="stylesheet"/>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script>
function callconfirm()
{
   // var isConfirmed
     BootstrapDialog.confirm({
            title: 'WARNING',
            message: 'Warning! Drop your banana?',
            type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            closable: false, // <-- Default value is false
            draggable: false, // <-- Default value is false
            btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel',
            btnOKLabel: 'Drop it!', // <-- Default value is 'OK',
            btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
            callback: function(result) {
                // result will be true if button was click, while it will be false if users close the dialog directly.
                if(result) {
                  return true;
                }else {
                    return false;
                }
            }
        });

}

function checkConfirm()
{
    var v=callconfirm();
    console.log(v);
}
</script>
</head>
<body>
<button type="button"  value="click" onclick="checkConfirm()" style="height: 50px;width: 50px" />
</body>

Answer 1

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" rel="stylesheet"/>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script>
function callconfirm(cb)
{
    var isConfirmed
     BootstrapDialog.confirm({
            title: 'WARNING',
            message: 'Warning! Drop your banana?',
            type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            closable: false, // <-- Default value is false
            draggable: false, // <-- Default value is false
            btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel',
            btnOKLabel: 'Drop it!', // <-- Default value is 'OK',
            btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
            callback: cb
        });

}
</script>
</head>
<body>
<button type="button"  value="click" onclick="javascript:callconfirm(console.log)" style="height: 50px;width: 50px" />
</body>

Answer 2

BootstrapDialog.confirm 会调用操作的回调。因此，如果您可以改为在回调中执行 console.log 会更好。该函数会立即 return 并且在用户实际单击“确定”或“取消”按钮之前您将无法依赖结果值。

工作代码：

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" rel="stylesheet"/>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script>
function callconfirm()
{
    var isConfirmed
     BootstrapDialog.confirm({
            title: 'WARNING',
            message: 'Warning! Drop your banana?',
            type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            closable: false, // <-- Default value is false
            draggable: false, // <-- Default value is false
            btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel',
            btnOKLabel: 'Drop it!', // <-- Default value is 'OK',
            btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
            callback: function(result) {
                // result will be true if button was click, while it will be false if users close the dialog directly.
                if(result) {
                  isConfirmed=true;
                   console.log(isConfirmed);
                }else {
                    isConfirmed=false;
                     console.log(isConfirmed);
                }
            }
        });

}
</script>
</head>
<body>
<button type="button"  value="click" onclick="callconfirm()" style="height: 50px;width: 50px" />
</body>

Answer 3

感谢 Agalo 和 Tareq 的建议和帮助我 post 下面的解决方案代码可能对其他人有帮助。

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" rel="stylesheet"/>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script>

function callconfirm(cb)
{
   // var isConfirmed
     BootstrapDialog.confirm({
            title: 'WARNING',
            message: 'Warning! Drop your banana?',
            type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
            closable: false, // <-- Default value is false
            draggable: false, // <-- Default value is false
            btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel',
            btnOKLabel: 'Drop it!', // <-- Default value is 'OK',
            btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used,
            callback:cb /*function(result) {
                // result will be true if button was click, while it will be false if users close the dialog directly.
                if(result) {
                  return true;
                }else {
                    return false;
                }
            }*/
        });

}

function b1checkConfirm(result)
{
    //callconfirm();
    console.log("B1 click and result is "+result);
}
function b2checkConfirm(result)
{
    //callconfirm();
    console.log("B2 click and result is "+result);
}
</script>
</head>
<body>
<button type="button"  onclick="callconfirm(b1checkConfirm)" style="height: 50px;width: 50px" >B1</button>
<button type="button"  onclick="callconfirm(b2checkConfirm)" style="height: 50px;width: 50px" >B2</button>
</body>

Answer 4

我从 Dante 这个插件的创建者那里得到了回复

https://github.com/nakupanda/bootstrap3-dialog/issues/329

BootstrapDialog 在另一个函数中确认不起作用

BootstrapDialog confirm inside another function not working

javascript

bootstrap-dialog