Server/Dynamically Generated Select Box in DT 1.10.16, Editor 1.6.5, BootStrap 4.0-beta

maliwik

I have DataTables v 1.10.16, Editor 1.6.5, and BootStrap 4.0-beta and I'm using the following code

$(document).ready(function(){

    var editor; // use a global for the submit and return data rendering
    var fldPageStatuses = [];

    editor = new $.fn.dataTable.Editor({
        "ajax":_my editor form include file_,
        "table": "#tblManageContent",
        "fields": [{
            "label": "Title:",
            "name": "fldPagesTitle"
        },
        {
            "label": "Status:",
            "name": "fldPagesStatus",
            "type":  "select",
            "def": 0
        },
        {
            "label": "Content:",
            "name": "fldPagesContent"
        }
        ]
    });

    var table = $('#tblManageContent').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: _my datatable server side processing include file_,
            type: "POST"
        },
        serverSide: true,
        processing: true,
        columns: [
            { data: "colPageTitle" },
            { data: "colStatusTitle" },
            { data: "colPageContent" },
            { data: "colDateModified" },
            { data: "colModifiedBy" }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    });
 
    $.getJSON('_my page statuses json output file_', function (data) {
     $.each(data, function (index) {
         fldPageStatuses.push({
             value: data[index].value,
             label: data[index].text
         });
     });
        editor.field( 'fldPageStatuses' ).update( fldPageStatuses );
    });
});

The population bit at the bottom is pulled from https://datatables.net/forums/discussion/36403 and changed to match my data. The json output file outputs the following:

[{"label":"Active","value":"1"},{"label":"Inactive","value":"2"},{"label":"Pending","value":"3"},{"label":"Archived","value":"4"},{"label":"Deleted","value":"5"},{"label":"Under Construction","value":"6"}]

However, when the page loads, I get the following error in Firefox Developer:

TypeError: editor.field(...) is undefined
[Learn More]

Am I doing something wrong? It's been a long time since I've fiddled with jQuery or even JS in general, but as far as I'm aware, everything seems to be in place.

allan

There isn't an Editor field with the name fldPageStatuses. There is one called fldPagesStatus though. So one of them has a typo - presumably the first one.

Allan

maliwik

Don't you wish all questions were that easy to answer?

You have no idea how much time I wasted yesterday trying to figure out what I was doing wrong. I think I'm going to need copious amounts more caffeine if I'm going to be resuming my web development career, at least at the start haha.

A pleasure, Allan, as always. Have a great day!

allan

Don't you wish all questions were that easy to answer?

Funnily enough - it sometimes takes longer to spot the typo ones. But in this case I knew what I was looking for based on your excellent description .

Allan