skip to Main Content

I am using bootbox prompt with select. To build the option for the select you have to provide something like this:

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

I want to make the options variable fetching them from the database. So I built a function:

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

that returns a JSON as expected:

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

To pass it to the bootbox function I tried to do:

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) {

but in both cases I get the following:

Uncaught Error: Error: prompt with select requires options

since fields remains empty.
What am I missing to be able to inject the data coming from getJson?

2

Answers


  1. Because $.getJSON is an asynchronous call and returns a promise you cannot use directly without resolving it.

    Therefore you can use bootbox.init callback in order to init your select box:

    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/StackOverflow/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/[email protected]/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>
    Login or Signup to reply.
  2. Since $.getJSON is an AJAX call, your options won’t exist until that resolves. jQuery AJAX functions are non-blocking, so you’re creating a Bootbox prompt with an "empty" object.

    The easiest fix is to create the prompt in the success callback of your AJAX function. Something like:

    $.getJSON("get_fields.php")
        .done(function(data) {
            bootbox.prompt({
                title: 'Select an option',
                inputOptions: data,
                callback: function(result){
                
                }
          });
      });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search