Inline editing failing to get cell info.

gbs-dev

Hi there, I developed a feature a few months ago that used datatables inline editing successfully, but it was shelved for a few months. Coming back to it recently, and I've found that my editing code no longer works. Specifically, when I click my 'label' cell I'm getting this error, which in most scenarios I've seen has been due to a typo or similar, but I'm fairly certain all my code is correct.

datatables.js?733c26:14634 Uncaught Error: Cannot automatically determine field name from data source
    at Editor.individual (datatables.js?733c26:14634:19)
    at Editor._dataSource (datatables.js?733c26:17101:19)
    at Editor.inline (datatables.js?733c26:16061:27)
    at HTMLTableCellElement.<anonymous> (blob-upload.js?733c87:99:21)
    at HTMLTableElement.dispatch (jquery-1.12.4.js?6dc34d:5226:27)
    at elemData.handle (jquery-1.12.4.js?6dc34d:4878:28)

If I specify my field name, in this case "Label" as a parameter to inline(), the function executes but does not open the inline editor. So I believe it's something to do with the editor and table not being configured correctly, but I'm stumped as to what.

I've checked all my labels and names and they all appear to match.

HTML:

<div>
    <table id="my-files" class="files-table row-border display">
        <thead>
        <tr>
            <th>Label</th>
            <th>Filename</th>
            <th>URL</th>
            <th>Created Date</th>
            <th></th>
            <th id="files-delete")'></th>
        </tr>
        </thead>
    </table>
</div>

AJAX returned value:

{
    "data": [
        {
            "BlobFileID": 1,
            "Label": "logo.gif",
            "FileName": "logo.gif",
            "Url": "www.filehost.com/logo.gif",
            "RawUrl": "www.filehost.com/logo.gif",
            "CreatedDate": "\/Date(1733431338774)\/"
        }
    ]
}

JS:

$(function () {
        var filesEditor = new DataTable.Editor({
            idSrc: "BlobFileID",
            ajax: {
                edit: {
                    type: 'POST',
                    url: window.Urls.EditBlobFile,
                    contentType: "application/json",
                    dataType: 'json',
                    data: function (d) {
                        var blobFileID = Object.keys(d.data)[0];
                        var row = d.data[blobFileID];
                        row.BlobFileID = blobFileID;
                        return JSON.stringify(row)
                    }
                }
            },
            fields: [{
                label: "Label",
                name: "Label"
            }],
            filesTable: "#my-files"
        });

    var filesTable = $("#my-files").DataTable({
        ajax: window.Urls.GetFilesUrl,
        rowID: "BlobFileID",
        order: [
            [1, 'asc']
        ],
        columns: [{
            data: "Label"
        },
        {
            data: "FileName",
            width: '20%'
        },
        {
            data: "Url",
            sortable: false,
            width: '30%'
        },
        {
            data: "CreatedDate",
            width: '16%',
            render: function (data, type, row, meta) {
                return moment(data).format(dateFormat);
            }
        },
        {
            render: function (data, type, row, meta) {
                return `<button class="copy-file-url ui-button ui-corner ui-widget" title="Copy link to file"><i class="bi bi-copy"></i></button >`;
            },
            className: "less-padding",
            sortable: false,
            width: '5%'
        },
        {
            render: function (data, type, row, meta) {
                return `<button class="delete-file ui-button ui-corner ui-widget" title="Delete file"><i class="bi bi-trash3-fill"></i></button >`;
            },
            className: "less-padding",
            visible: !$("#files-delete").hasClass("hidden"),
            sortable: false,
            width: '5%'
        }]
    });

    $("#my-files").on(
        'click',
        'tbody tr td:nth-child(1)',
        function (e) {
                filesEditor.inline(
                    filesTable.cells(this.parentNode, '*').nodes(),
                    { submit: 'allIfChanged' });
                filesTable.columns.adjust();
        });
}
});

Debugging through the datatables source code, when I get to the individual call, calling this.Fields() does return a 1-element list containing my "Label field", so that part looks to be correct. However the passed-in identifier object that the code inspects appears to be an _Api object, which fails the if (identifier instanceof $ || identifier.nodeName) check.

Is this the right rabbit hole to be going down, or should I just specify the name and investigate why that part is failing silently?

Thanks for any help.

allan

filesTable.cells(this.parentNode, '*').nodes()

it's this. It isn't the label that is throwing the error (I think), but rather that you are triggering inline editing on all of the cells in the row. Try:

filesEditor.inline(this, {submit: 'allIfChanged'});

Allan

gbs-dev

I figured it out - in addition to your note, i was inadvertently running in standalone mode instead. The line in question was the editor initialization

filesTable: "#my-files"

which should have of course been:

table: "#my-files"

This was due to a refactor when I renamed the table. Thanks so much for your help.

allan

Good stuff - great to hear you got it working. Thanks for posting back!

Allan