Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82212

Inline editing failing to get cell info.

$
0
0

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.


Viewing all articles
Browse latest Browse all 82212

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>