Dynamically add data to select editor type.

davykiash

Hello,

I would like to add data dynamically to my select editor type. So far this is what I have.

fields: [ 
                            
    {
        label: "Item Category:",
        name: "inventory_category_id",
        type: "select",
        //options: [{ label: "home", value: 500},{label: "test2", value: 501}],
        options: [get_categories()],
    },
                            
]

Below is the function that will return the values.

function get_categories()
{

    myvalue = [];
            
    myvalue.push({'label':'home','value':'500'});
    myvalue.push({'label':'test2','value':'501'});
            
    console.log(myvalue);
            
    return myvalue;
        
}

As of now the items are not displaying on the select dropdown. Any guidance will be greatly appreciated.

rduncecb

The get_categories() function is already returning an array, remove the square brackets from your field definition.

fields: [
                             
    {
        label: "Item Category:",
        name: "inventory_category_id",
        type: "select",
        //options: [{ label: "home", value: 500},{label: "test2", value: 501}],
        options: get_categories(),
    },
                             
]

davykiash

@rduncecb I have removed the square brackets and I see no change in the results. The select dropdown is still empty.

rduncecb

I put together a quick test case here: http://live.datatables.net/ruqixuge/4/edit
The drop down has the values returned from the function in the Editor dialog when you click the 'New' button. It's using your field definition and get_categories function. Have you checked the dev console for errors?

davykiash

@rduncecb I have just discovered that if I place the code in question block an ajax call it does not work. It works well if I don't place it in a ajax call function.

Below is the actual code block we should be troubleshooting. My console logs the output as expected.

function get_categories()
{
            
    $.ajax
    ({
        type: "POST",
        url: "../actions/process_dt_select.php",
        data:{
            'action_id':'18'
        },
        success: function(msg)
        {

            myvalue = [];
            
            myvalue.push({'label':'home','value':'500'});
            myvalue.push({'label':'test2','value':'501'});
            
            console.log(myvalue);
            
            return myvalue;
            
        },
        error: function(result){
            
        }   
    });
    
}

I could be missing/overlooking something.

rduncecb

Aahh, that shines a light on the situation.

Things get a lot different when asynchronous ajax calls are made. get_categories will exit at line 29 BEFORE the ajax call has had a chance to do it's thing. The array of options will not be returned from your function call so will not be set in the options property of your field definition. The success function of the ajax call will not be executed until the call responds, the return statement will not return a value from the the get_categories function to the optins setting, it will return it to where the ajax success callback is executed, i.e.: not where you are expecting it to in your example. Does that make sense?

When you are doing things asynchronously, you can not return values this way. Think of calling $.ajax as starting a new 'thing' that will respond at a later time when it's ready. Anything after the $.ajax(...) will continue without waiting for a response, hence asynchronous. Your success function/callback will execute only after you get a response to the ajax call.

Because you need to wait until you get a response back from the ajax call you can't initialise your options this way. Assuming you have a variable editor you can rewrite your code like this:

fields: [
                             
    {
        label: "Item Category:",
        name: "inventory_category_id",
        type: "select",
        options: []
    },
                             
]

function get_categories()
{
             
    $.ajax
    ({
        type: "POST",
        url: "../actions/process_dt_select.php",
        data:{
            'action_id':'18'
        },
        success: function(msg)
        {
 
            myvalue = [];
             
            myvalue.push({'label':'home','value':'500'});
            myvalue.push({'label':'test2','value':'501'});
             
            console.log(myvalue);
            // update the field with the options 
            editor.field("inventory_category_id").update(myvalue);
        },
        error: function(result){
             
        }  
    });
     
}

The select field type has update function, see https://editor.datatables.net/reference/field/select which can be used here. Basically, the editor is initialised with empty options, when the ajax call has responds successfully the field is used to get the field and update the options with the new data.

davykiash

@rduncecb Thanks!