bootbox 提示 select 带有来自数据库的选项

Question

我正在使用带 select 的引导箱提示符。要为 select 构建选项，您必须提供如下内容：

inputOptions: [
                {
                    text: 'Ad inizio tabella',
                    value: '',
                },
                {
                    text: 'Choice One',
                    value: '1',
                },
                {
                    text: 'Choice Two',
                    value: '2',
                },
                {
                    text: 'Choice Three',
                    value: '3',
                }
                ]

我想使选项变量从数据库中获取它们。所以我建立了一个函数：

        $.getJSON( "get_fields.php", { wizard: wizard } ).done(function(data){fields_selected=data;});

如预期的那样 returns JSON:

[
    {
        "text":"Inserisci dopo Nome",
        "value":"Nome"
    },
    {
        "text":"Inserisci dopo cognome",
        "value":"cognome"
    }
]

将它传递给我尝试做的bootbox函数：

var fields = '';
            $.getJSON( "get_fields.php", { wizard: wizard } ).done(function(data){fields_selected=data;});
bootbox.prompt({
            title: "Scegli dopo quale campo inserire il nuovo",
            inputType: 'select',
            inputOptions: fields,
            callback: function (result) {

但在这两种情况下我都得到以下信息：

Uncaught Error: Error: prompt with select requires options

因为字段仍然是空的。我缺少什么才能注入来自 getJson 的数据？

Answer 1

因为$.getJSON is an asynchronous call and returns a promise you cannot use directly without resolving它。

因此您可以使用 bootbox.init callback 来初始化您的 select 盒子：

var data = [{
    text: 'Ad inizio tabella',
    value: ''
}, {
    text: 'Choice One',
    value: '1'
}, {
    text: 'Choice Two',
    value: '2'
}, {
    text: 'Choice Three',
    value: '3'
}
];
$.getJSON("http://localhost:63342/Whosebug/1.html");
var dialog = bootbox.prompt({
    title: "Scegli dopo quale campo inserire il nuovo",
    inputType: 'select',
    inputOptions: [{text: '', value: ''}],
    callback: function (result) {
        var x = this;
    }
});
dialog.init(function (e) {
    // remove comment from next line.....
    // $.getJSON("get_fields.php", function (data, textStatus, jqXHR) {
        // wait for a while....
        setTimeout(function () {
            // get the bootbox select object
            var sb = dialog.find('.bootbox-body .bootbox-input-select');
            sb.empty();
            data.forEach(e => sb.append($('<option/>', {value: e.value, text: e.text})));;
        }, 500);
    // remove comment from next line.....
    //});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"></script>

Answer 2

由于 $.getJSON 是一个 AJAX 呼叫，您的选项在该呼叫解决之前不存在。 jQuery AJAX 函数是非阻塞的，因此您正在创建一个带有“空”对象的 Bootbox 提示符。

最简单的解决方法是在 AJAX 函数的成功回调中创建提示。类似于：

$.getJSON("get_fields.php")
    .done(function(data) {
        bootbox.prompt({
            title: 'Select an option',
            inputOptions: data,
            callback: function(result){
            
            }
      });
  });

bootbox 提示 select 带有来自数据库的选项

bootbox prompt select with options from database

ajax

jquery

bootbox