How to build Editor fields through AJAX (Please specify field name error)

evanderv

I'm trying to create/add editor fields during the "createdRow" callback on the DataTable, because the rows contain information about the field to be edited (e.g., label, type, name). My setup is a little different in that I have a table where the first column is the label, and the second column displays the value (which has a listener on it for editing)

Here is an example of JSON being returned:

{"data":[{"id":10277022,"field":"code","type":"text","label":"Code","value":"AE1"},{"id":10277022,"field":"content","type":"textarea","label":"Content","value":"Adverse events1"}]}

Editor Initialization

    detailsEditor = new $.fn.dataTable.Editor( {
        ajax: {
            create: 'blank.jsp?_response=true&_action=newFootnote',
            remove: 'blank.jsp?_response=true&_action=deleteFootnote',
        },
        table: "#details",
        idSrc: "id"
    } );

DataTables Initialization:

    details = $('#details').DataTable( {
        paging:         false,
        lengthChange:   false,
        info:           false,
        searching:      false,
        ordering:       false,
        rowId:          "field",
        ajax:   'blank.jsp?_response=true&_action=loadDetails&id=' + $("#details").attr('data-footnote-id'),
        columns: [
            { data: "label" },
            { data: "value" }
        ],
        createdRow: function ( row, data, index ) {
            var field = { name: data.field, data: data.value };
            detailsEditor.add(field);
        }
    } );

Listener:

    $('#details').on( 'click', 'tbody td:nth-child(2)', function (e) {
        detailsEditor.inline( this, {
            buttons: { label: '<i class="fas fa-check-circle"></i>', className: 'btn-primary', fn: function () { this.submit(); } }
        } );
    } );

I keep getting the following error:

 Unable to automatically determine field from source. Please specify the field name.

I feel I'm close, but missing something. Any ideas?

evanderv

Update: If I do the following, it works but I still can't specify the field type that's coming from the json data.

    detailsEditor = new $.fn.dataTable.Editor( {
        ajax: {
            create: 'blank.jsp?_response=true&_action=newFootnote',
            remove: 'blank.jsp?_response=true&_action=deleteFootnote',
        },
        table: "#details",
        idSrc: "id",
        fields: [ {
                label: "label",
                name:  "value"
            }
        ]
    } );

details = $('#details').DataTable( {
        paging:         false,
        lengthChange:   false,
        info:           false,
        searching:      false,
        ordering:       false,
        rowId:          "id",
        ajax:   'blank.jsp?_response=true&_action=loadDetails&id=' + $("#details").attr('data-footnote-id'),
        columns: [
            { data: "label" },
            { data: "value" }
        ],
    } );

kthorngren

I don't think you want to use createdRow for this as it is called for each row created. So detailsEditor.add(field); will be called for each row. I think you will want to use initComplete. One of the parameters is the JSON returned from the server.

If you continue to have difficulties please post a link to your page or a test case replicating the issue. Then we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

evanderv

I tried using initComplete, same result even if I initialize the editor in the same callback, passing an array. It seems to have a problem when I pass in a fields array containing config settings.

        initComplete: function( settings, json ) {
            var array = [];
            json.data.forEach(function (data) {
                 var field = { data: data.value, name: data.field, label: data.label, type: data.type };
                 array.push(field);
            });
            detailsEditor = new $.fn.dataTable.Editor( {
                ajax: {
                    create: 'blank.jsp?_response=true&_action=newFootnote',
                    remove: 'blank.jsp?_response=true&_action=deleteFootnote',
                },
                table: "#details",
                idSrc: "id",
                fields: array
            } );
          }

kthorngren

Your code still seems like the same issue that you are iterating each row to build the Editor fields. That doesn't seem like it would work to me. Maybe you would be better off returning an object in your json response that contains just the Editor field definitions. You can use the ajax.dataSrc option as a function to extract this object and build your Editor fields array.

Again if you want help with your code please post a test case.

Kevin

evanderv

Each row IS a different field. You'll see from the test cases below, column 1 are the field labels, column 2 are the data for each label.

Here's a test case that allows inline editing, without a field type being specified:

live.datatables.net/qukofovi/1/edit?html,css,js,output

And here's a test case that breaks when I try to pass in the type (e.g., 'content' has a type of 'textarea').

live.datatables.net/vifevevi/1/edit?html,js,console,output

allan

Yup - createdRow isn't what you want to use here. Because Editor is a "row editor" it expects all fields to be available in all rows. That isn't the case here as you say. It would be possible to use clear() to remove all existing fields and then add() to create the new ones when you activate editing on a row.

However, before you go down that route. Why not just use name: 'val' for the field? The value to edit is always in the val parameter in the above JSON. Can you just configure Editor to edit that?

Allan