Select menu options from ajax call

ChuckT

Hi Allan,

I am trying to use a select menu on editor update and I need to fill the <options> from a database of companies.
I have read the discussion on the forum https://datatables.net/forums/discussion/9899 and have successfully created my function to build an array. However, when I call my function in the editor it doesn't fill my options with anything.

Here's my code for the editor:

 var editor;
        
        editor = new $.fn.dataTable.Editor( {
            edit: {
                type: 'PUT',
                dataSrc: "data.forms",
                url:  apiPathProtected ,
                beforeSend: function (request) {
                    request.setRequestHeader("X-Access-Token", user.token);
                    request.setRequestHeader("Content-Type", "application/json");
                    
                },
                contentType: 'application/json',
                data: function ( d ) {
                    var formData = d.data[Object.keys(d.data)[0]];
                    var customBody = {
                        "data":{ 
                            "id_user": user.userid, 
                            "id_group": user.groupid, 
                            "date_created":formData.date_created, 
                            "company_name":formData.company_name,
                            "first_name": formData.first_name,
                            "last_name": formData.last_name,
                            "form_type": formData.form_type,
                            "key_field_values": formData.key_field_values
                    }
                    }
                    return JSON.stringify(customBody);
                }
            },
            table: "#the-table",
            idSrc:  'id',
            fields: [
                 {
                    "label": "Company:",
                    "name": "company_name",
                    "type":  "select",
                    "placeholder": "Select a Company",
                    "ipOpts": companyNames()
                }
            ] 
        });       

and the ajax function:

function companyNames() {

                $.ajax({
                    url: apiPathProtected ,
                    type: 'GET',
                    dataSrc: "data.companies",
                    beforeSend: function (request) {
                        request.setRequestHeader("X-Access-Token", user.token);
                        request.setRequestHeader("Content-Type", "application/json");
                    },
                    success: function(response) { 
                        if ( response.result == "success"){
                            companyArray = response;
                               
                            if (companyArray.data.companies.length > 0) {                   
                                    
                                for(var z=0; z<companyArray.data.companies.length; z++) {  
                                    var label = "";
                                    var value = "";
                                    
                                    label = companyArray.data.companies[z].company_name;
                                    value = companyArray.data.companies[z].id;

                                    var selectValue = [];
                                    selectValue = [label, value];
                                    
                                }                       
                            }
                                return selectValue;                         
                        } else { 
                            return [];
                        }
                    }
                })
            }

As per the forum discussion I cited I am simply trying to pass the function into the ipOpts and return the array to populate the <option> of my <select> menu.
Any help would be appreciated.

allan

Hi,

There are two issues with the code shown:

1. The return statement with the array of options is actually returning from the success callback - so your companyNames function is actually returning undefined!
2. The Ajax request is async, so the value return from companyNames can never be the result of the Ajax request, unless you may is synchronous - which is not a good idea (it blocks the UI and makes the whole page unresponsive).

What I would suggest you do instead is use the update() method of the select type instead. i.e. keep your companyNames function, but instead of assigning its return value to ipOpts, just call it after the Editor is initialised. Then use editor.field( 'company_name' ).update( selectValue );.

I'm not sure that your array is actually constructed correctly either actually - you want use:

selectValue.push( { label: label, value: value } );

and define selectValue out side of the function.

Allan

ChuckT

Thanks Allen,

.update() was the answer I was looking for. I had actually tried that before but as you pointed out my function was jacked up. Too long staring at a screen I suppose. Thanks again.