Options array

abarnes

Pulling my hair out. I'm trying to populate a select field with data from ajax response.

This is my ajax response:

{
    "data": [{
        "DT_RowId": "row_00001",
        "deviceAsset": "Click to Add...",
        "deviceOwner": "Users Name",
        "deviceLocation": "The Location",
        "deviceDept": "The Dept"
    }],
    "options": {
        "deviceLocation": [{
            "label": "Location 1",
            "value": "Location 1"
        }, {
            "label": "Location 2",
            "value": "Location 2"
        }, {
            "label": "Location 3",
            "value": "Location 3"
        }]
    },
    "files": []
}

This is my editor declare:

editor = new $.fn.dataTable.Editor( {
    ajax: deviceTBL+'&request=system',
    fields: [ {
            label: "Asset:",
            name: "deviceAsset"
        },
        {
            label: "Owner:",
            name: "deviceOwner"
        },
        {
            label: "Location:",
            name: "deviceLocation",
            type: "select",
            placeholder: "Select a location"
        },
        {
            label: "Department:",
            name: "deviceDept"
        },
    ]
} );

The data loads in the table no issues. But when I click to edit in bubble, the dropdown is empty except for the place holder. What am I missing?

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Hi,

I don't immediately see anything wrong there. Could you show me your DataTables initialisation and also take a trace with the debugger please - click the Upload button and then let me know what the debug code is.

Thanks,
Allan

abarnes

With this particular one I am using my own ajax script. I initialize with this and call a function. It works perfect except for the options on select. I can edit fields etc.

$.ajax( {
        url: deviceTBL+'&request=system',
        dataType: 'json',
        success: function ( json ) {
            for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                loadData( json.data[i] );
            }
        }
    } );

abarnes

Another thing I find strange through debugging is if the Location field is set as type "select", everytime I update a field it sends the field location to be updated as well. For example if I update Asset, the data submits to change Asset and Location. If I declare the field as a regular field this doesn't happen.

abarnes

For clarification what I'm trying to accomplish is user clicks a regular field to edit and editor provides a dropdown of choices. I don't want the dropdown in the regular table.

abarnes

I'm also using the standalone option as I'm updating labels instead of tables

abarnes

UPDATE:

Here is what I finally got to work. Is this the proper way to load select options for 2 fields?

$.ajax( {
        url: deviceTBL+'&request=system',
        dataType: 'json',
        success: function ( json ) {
            for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                loadData( json.data[i] );
            }
            var optionsLocation = [];
            var optionLocation = {};
            $.each(json.options.deviceLocation, function (i, e) {
                optionLocation.label = e.label;
                optionLocation.value = e.value;
                optionsLocation.push(optionLocation);
                optionLocation = {};
            });
            editor.field('deviceLocation').update(optionsLocation);             
            var optionsDept = [];
            var optionDept = {};
            $.each(json.options.deviceDept, function (i, e) {
                optionDept.label = e.label;
                optionDept.value = e.value;
                optionsDept.push(optionDept);
                optionDept = {};
            }); 
            editor.field('deviceDept').update(optionsDept);         
        }
    } );

abarnes

Last Update: This is the final code. Is this the best way? Works perfect.

function refreshSystem(){
        $.ajax( {
            url: deviceTBL+'&request=system',
            dataType: 'json',
            success: function ( json ) {
                for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                    loadData( json.data[i] );
                }
                var optionsLoad = [];
                var optionLoad = {};
                $.each(json.options, function (i, e) {
                    console.log(i);
                    if(json.options[i] != null){
                        $.each(json.options[i], function (j, e) {
                            optionLoad.label = e.label;
                            optionLoad.value = e.value;
                            optionsLoad.push(optionLoad);
                            optionLoad = {};
                        });
                        editor.field(i).update(optionsLoad);
                        optionsLoad = [];
                    }
                });
            }
        } );
    }

allan

With this particular one I am using my own ajax script. I initialize with this and call a function. It works perfect except for the options on select. I can edit fields etc.

That would do it. If you aren't using DataTables' own ajax option then Editor can't auto detect the options. So yes, the field().update() method is the correct way of doing this.

Allan