How to build Editor fields through AJAX (Please specify field name error)
How to build Editor fields through AJAX (Please specify field name error)
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?
Answers
Update: If I do the following, it works but I still can't specify the field type that's coming from the json data.
I don't think you want to use
createdRow
for this as it is called for each row created. SodetailsEditor.add(field);
will be called for each row. I think you will want to useinitComplete
. 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
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.
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
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
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 useclear()
to remove all existing fields and thenadd()
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 theval
parameter in the above JSON. Can you just configure Editor to edit that?Allan