Generating field options with an array obtained from ajax source

VinuraD

Hi,

I've seen similar questions related to populating field options (or dropdown input options) using an ajax data sources. I want to know whether its possible to populate the options using an array only(without labels and values/JSON), like below,

input array from ajax=[test1,test2,test3]

var options;
    function optionlist() {                  
            $.get("/itemlist",function(data) {                
                //console.log(data)
                options=data;
        }
        ).done(function() {
        editor.field('customer').update(options);   
       option=[]; 
        });
        }

So the values test1,test2,test3 will be the options

Thanks

rf1234

It depends on how you initialized the field. Normally it is initialized with an array of label - value pairs which is an array of objects. But of course label and value may be identical. Something like this should work:

var labelValuePairs = [];
var labelValueObj;
for (var i=0; i < options.length; i++) {
    labelValueObj = {};
    labelValueObj.label = options[i]; //set property label
    labelValueObj.value = options[i]; //set property value
    labelValuePairs.push(labelValueObj); //add to array of objects
}
editor.field('customer').update(labelValuePairs); 

This would produce this array of objects:

labelValuePairs=
    [
        { label: "test1", value: "test1" },
        { label: "test2", value: "test2" },
        { label: "test3", value: "test3" }
    ];

Just see that you can pass a simple array as well:
https://editor.datatables.net/reference/api/field().update()
see "Example"

So if you initialized the field with the usual label - value pairs pass label - value pairs. If you did initialization with a simple array pass a simple array.

VinuraD

Thanks, it was a good explanation. Could you tell in which scope this should be called.

editor.field('title').update( [
'values'
] );

I tried calling this using a separate function (as in my question) and at global level also. But it doesn't work. What I don't get is that where is the variable name 'editor' is declared. Currently, I have defined a global 'editor' variable. But how can it be a reference to my datatable editor instance? Thanks

rf1234

the "open" event should work.

Here is a list:
https://editor.datatables.net/manual/events

And the "open" event:
https://editor.datatables.net/reference/event/open

editor.on( 'open', function ( e, mode, action ) {
   var labelValuePairs = [];
   var labelValueObj;
   for (var i=0; i < options.length; i++) {
       labelValueObj = {};
       labelValueObj.label = options[i]; //set property label
       labelValueObj.value = options[i]; //set property value
       labelValuePairs.push(labelValueObj); //add to array of objects
   }
   editor.field('customer').update(labelValuePairs);
} );

Of course: your ajax call needs to have been completed as well. So you could do it on success of the ajax call e.g. on "select" of the record to be edited. That may be an option as well: As soon as the user selects a record, the options are being retrieved and they should probably have been loaded when the user clicks the "edit" button for example.
"select" is a dt event not an Editor event.
You can find the dt events here: https://datatables.net/reference/event/

VinuraD

var option;
    editor.on( 'open', function ( e, mode, action ) {
        $.get("/itemlist",function(data) {
            option = data;
         }).done(function(){
         editor.field('item').update(option);
         }
    )});

This is how I did it using only an array (no label, value pairs). Many thanks for the help @rf1234