Edit form is blank on DT Editor

jordonshaw

Here is my debug:
https://debug.datatables.net/iceniy

I'm not getting any errors in my data table, which is what is confusing. I have used datatables for years, but haven't ever used the editor until today. The table is working correctly. The insert is working correctly; however, when I click a record and click Edit, the form isn't filled out. Here is my code:

function createChild(row) {
        var baseurl = "<?php echo base_url(); ?>";
        var rowData = row.data();
        var table = $('<table class="display" width="100%"/>');
        row.child(table).show();

        var Product_options = [];

        $.getJSON(baseurl + "masterpo/getproducts", function(data) {
                var option = {};
                $.each(data, function(i,e) {
                    option.label = e.label;
                    option.value = e.value;
                    Product_options.push(option);
                    option = {};
                });
            }
        ).done(function() {
            lineitemsEditor.field('ProductId').update(Product_options);
        });

        var lineitemsEditor = new $.fn.dataTable.Editor({
            ajax: {
                url:  baseurl + "masterpo/addnewlineitem",
                type: 'post',
                data: function(d) {
                    d.POHeaderId = rowData.id;
                }
            },
            table: table,
            fields: [
                {
                    label: "PO Line Item Number:",
                    name: "POLineItemNumber",
                },
                {
                    label: "Ticket Number:",
                    name: "TicketNumber"
                },
                {
                    label: "Quantity:",
                    name: "Quantity"
                },
                {
                    label: "Item Notes:",
                    name: "ItemNotes",
                    type:  "textarea"
                },
                {
                    label: "Product",
                    name: "ProductId",
                    type: "select",
                    options: []
                },
            ]
        });

        // Child row DataTable configuration, always passes the parent row's id to server
        var lineitemsTable = table.DataTable({
            dom: "Bfrtip",
            pageLength: 5,
            ajax: {
                url:  baseurl + "masterpo/getposlineitems",
                type: "post",
                data: function(d) {
                    d.POHeaderId = rowData.id;
                }
            },
            columns: [
                { title: "POLineItemNumber", data: "polineitemnumber" },
                { title: "TicketNumber", data: "ticketnumber" },
                { title: "Quantity", data: "quantity" },
                { title: "ItemNotes", data: "itemnotes" },
                { title: "Product Code", data: "productcode" },
                { title: "Product Name", data: "productname" },
                { title: "Supplier Code", data: "suppliercode" },
                { title: "Supplier Name", data: "suppliername" },
                { title: "Supplier Type", data: "suppliertype" },
                { title: "Supplier Group", data: "suppliergroup" }
            ],
            select: true,
            buttons: [
                { extend: "create", editor: lineitemsEditor },
                { extend: "edit", editor: lineitemsEditor }
            ]
        });

        lineitemsEditor.on( 'submitSuccess', function (e, json, data, action) {
            row.ajax.reload(function () {
                $(row.cell( row.id(true), 0 ).node()).click();
            });
        } );
    }

    function updateChild(row) {
        $("table", row.child())
            .DataTable()
            .ajax.reload();
    }

    function destroyChild(row) {
        // Remove and destroy the DataTable in the child row
        var table = $("table", row.child());
        table.detach();
        table.DataTable().destroy();

        // And then hide the row
        row.child.hide();
    }

    $(document).ready(function() {
        var r=0;
        $('#masterPo thead tr').clone(true).appendTo( '#masterPo thead' );
        $('#masterPo thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            r > 0 ? $(this).html( '<input type="text" placeholder="Search '+title+'" />' ) : '';
            r++;
            $( 'input', this ).on( 'keyup change', function () {
                if ( poTable.column(i).search() !== this.value ) {
                    poTable
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        } );


        var baseurl = "<?php echo base_url(); ?>";
        var poTable = $("#masterPo").DataTable({
            dom: "rtip",
            orderCellsTop: true,
            fixedHeader: true,
            scrollX: true,
            scrollCollapse: true,
            "ajax":  baseurl + "masterpo/getmasterpos",
            order: [1, "asc"],
            'columnDefs': [
                {'targets': [10], 'class': 'wrapok-200'},
                {'targets': [9], 'class': 'wrapok-300'},
                {'targets': [16], 'class': 'wrapok-400'},
            ],
            columns: [
                {
                    className: "details-control",
                    orderable: false,
                    data: null,
                    defaultContent: "",
                    width: "10%"
                },
                { "data": "id" },
                { "data": "Status" },
                { "data": "OrderDate" },
                { "data": "DeliveryDate" },
                { "data": "PickUpDate" },
                { "data": "ForemanDescription" },
                { "data": "ForemanPhone" },
                { "data": "CrewDescription" },
                { "data": "Address" },
                { "data": "CityState" },
                { "data": "LineItem" },
                { "data": "JobCode" },
                { "data": "PhaseCode" },
                { "data": "WorkOrder" },
                { "data": "GLDescription" },
                { "data": "Notes" }
            ],
            select: {
                style: "os",
                selector: "td:not(:first-child)"
            }
        });

        // Add event listener for opening and closing details
        $("#masterPo tbody").on("click", "td.details-control", function() {
            var tr = $(this).closest("tr");
            var row = poTable.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                destroyChild(row);
                tr.removeClass("shown");
            } else {
                // Open this row
                createChild(row);
                tr.addClass("shown");
            }
        });
    });

allan

Hi,

Great to hear you are a long time DataTables user .

It looks like the problem you are having here is one of case. In the Editor field.name configuration you have:

POLineItemNumber

But in the DataTables columns.data option it is:

polineitemnumber

Javascript is case sensitive, so this difference will cause the issue. They should both match the case that is used in the loaded JSON data. In this case that is presumably polineitemnumber if that table populating correctly.

Regards,
Allan

jordonshaw

Allan,

You are a life saver. I had looked at that way too long that I could no longer see the forest for the trees. Thank you for your help!

Jordon