Editor edit(update) menu is not populated with data.

A.obj.sys.inc

Using the example https://editor.datatables.net/examples/inline-editing/simple I could not get my edit menu to populate with data from the row selected. Looking at the example it would seem that population of fields is done behind the scenes and does not interact with the server. Am I missing something ? This is part of my code.

<script>
    var token = $("meta[name='_csrf']").attr("content");
    var dt_modifiers = [ 'mDataProp_', 'sSearch_', 'iSortCol_', 'bSortable_',
            'bRegex_', 'bSearchable_', 'sSortDir_' ];

    var stringify_aoData = function(aoData, modifiers) {
        var o = {};

        jQuery
                .each(
                        aoData,
                        function(idx, obj) {
                            //console.log("idx:" + idx + " obj:" + obj.name);

                            if (obj.name) {

                                for (var i = 0; i < modifiers.length; i++) {
                                    if (obj.name.substring(0,
                                            modifiers[i].length) == modifiers[i]) {
                                        var index = parseInt(obj.name
                                                .substring(modifiers[i].length));
                                        var key = 'a'
                                                + modifiers[i]
                                                        .substring(
                                                                0,
                                                                modifiers[i].length - 1);
                                        if (!o[key]) {
                                            o[key] = [];
                                        }
                                        //console.log('index=' + index);
                                        o[key][index] = obj.value;
                                        //console.log(key + ".push(" + obj.value + ")");
                                        return;
                                    }
                                }
                                //console.log(obj.name+"=" + obj.value);
                                o[obj.name] = obj.value;
                            } else {
                                //console.log("idx:" + idx + " obj:" + obj.name);
                                o[idx] = obj;
                            }

                        });
        return JSON.stringify(o);
    };

    $(document).ready(
            function() {
                editor = new $.fn.dataTable.Editor({
                    ajax : function(method, url, data, success, error) {
                        $.ajax({
                            headers : {
                                'Accept' : 'application/json',
                                'Content-Type' : 'application/json',
                                "X-CSRF-TOKEN" : token
                            },
                            type : "POST",
                            url : "host/data.do",
                            "data" : data,
                            dataType : "json",
                            success : function(json) {
                                success(json);
                            },
                            error : function(xhr, error, thrown) {
                                alert("xhr:[" + xhr.responseText + "]"
                                        + " error:[" + error + "]"
                                        + " thrown:[" + thrown + "]");
                            }
                        })
                    },
                    table : "#edvs-table",
                    fields : [ {
                        label : "Host Name:",
                        name : "host_name"
                    }, {
                        label : "Host IP:",
                        name : "host_IP"
                    }, {
                        label : "Heartbeat Cycle Time:",
                        name : "cycletime_heartbeat"
                    }, {
                        label : "Verify Cycle Time:",
                        name : "cycletime_verify"
                    }, {
                        label : "ListTests Cycle Time:",
                        name : "cycletime_listtests"
                    }, {
                        label : "Loadlib Path:",
                        name : "loadlib_path"
                    }, {
                        label : "Retry Count:",
                        name : "retry_count"
                    }, {
                        label : "Active Status:",
                        name : "active_status",
                        type : "radio",
                        options : [ {
                            label : "ACTIVE",
                            value : 'ACTIVE'
                        }, {
                            label : "INACTIVE",
                            value : 'INACTIVE'
                        } ]
                    } ]
                });

                // Activate an inline edit on click of a table cell
                $('#example').on('click', 'tbody td:not(:first-child)',
                        function(e) {
                            editor.inline(this);
                        });

                $('#edvs-table').DataTable(
                        {
                            dom : "Bfrtip",
                            "bSort" : false,
                            "sAjaxSource" : "host/data",
                            "fnServerData" : function(sSource, aoData,
                                    fnCallback, oSettings) {
                                oSettings.jqXHR = $.ajax({
                                    headers : {
                                        'Accept' : 'application/json',
                                        'Content-Type' : 'application/json',
                                        "X-CSRF-TOKEN" : token
                                    },

                                    "dataType" : "json",
                                    "type" : "POST",
                                    "url" : sSource,
                                    //"data" : aoData,
                                    "data" : stringify_aoData(aoData,
                                            dt_modifiers),
                                    "success" : fnCallback
                                });
                            },
                            columns : [ {
                                data : null,
                                defaultContent : '',
                                className : 'select-checkbox',
                                orderable : false
                            }, {
                                data : "host.host_name"
                            }, {
                                data : "host.host_IP"
                            }, {
                                data : "host.cycletime_heartbeat"
                            }, {
                                data : "host.cycletime_verify"
                            }, {
                                data : "host.cycletime_listtests"
                            }, {
                                data : "host.loadlib_path"
                            }, {
                                data : "host.retry_count"
                            }, {
                                data : "host.active_status"
                            }, {
                                className : "active_date_class",
                                data : "host.active_date"
                            }, {
                                className : "nonactive_date_class",
                                data : "host.nonactive_date"
                            }, {
                                data : "host.user_created"
                            }, {
                                className : "date_created_class",
                                data : "host.date_created"
                            }, {
                                data : "host.user_updated"
                            }, {
                                className : "date_updated_class",
                                data : "host.date_updated"
                            } ],
                            select : {
                                style : 'os',
                                selector : 'td:first-child'
                            },
                            buttons : [ {
                                extend : "create",
                                editor : editor
                            }, {
                                extend : "edit",
                                editor : editor
                            }, {
                                extend : "remove",
                                editor : editor
                            } ]
                        });
            });
</script>

Thanks for any help.

allan

Can you give me a link to the page so I can look into it please. Which field is it specifically that is not-populating?

Allan

A.obj.sys.inc

I found the problem. The editor object was not using the same field data names as the data table. The editor used the following:

fields : [ {
  label : "Host Name:",
  name : "host_name"
}

The data table used the following:

data : "host.host_name"

When I changed the editor field name to:

fields : [ {
  label : "Host Name:",
  name : "host.host_name"
}

The editor menu populated properly.

allan

Excellent to hear you've got it working now!

Allan