Question posted in
You can find the official documentation here.

bootbox prompt select with options from database – Jquery ajax

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?

Tags:

2

Answers


  1. 0

    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. 0

    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