11. Editor: Unable to automatically determine field from source.

Editor's bubble() and inline() methods, when activated, will automatically attempt to discover which field the element that has been given to the function as the first argument relates to in the field. If it is unable to do so, Editor will emit the following error:

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

Automatic detection

When bubble() and inline() are used with just a single parameter, Editor will read the data source property for the data cell that was given as the first parameter (the example will illustrate this). It will then loop through the fields available to the list to find a field with a matching data source property and use that as the field to be edited.

Examples

Consider the following Editor and DataTables initialisation:

var editor = new $.fn.dataTable.Editor( {
    ajax: "../php/staff.php",
    table: "#example",
    fields: [ {
            label: "First name:",
            name: "first_name"
        }, {
            label: "Last name:",
            name: "last_name"
        }, {
            label: "Manager:",
            name: "manager.id"
        }
    ]
} );

$('#example').DataTable( {
    ajax: "../php/staff.php",
    columns: [
        { data: "first_name" },
        { data: "last_name" },
        { data: "manager.name" }
    ]
} );

The JSON data used for this initialisation would be structured thus:

{
    "first_name": "Fiona",
    "last_name":  "Green",
    "manager": {
        "name": "Chris White",
        "id":   3
    }
}

Note how the first two columns in the table directly map to the first two fields in the Editor form. However, the Manager field does not have that direct correlation.

Consider the following:

editor.inline( $('#example tbody tr:first-child td:first-child') );

The selector here will select the first first cell in the first row of the table. Editor will be able to automatically determine that the data in that column comes from the data property first_name and since there is a field with that name in the form, it will automatically use that field.

Now consider:

editor.inline( $('#example tbody tr:first-child td:last-child') );

In this case we select the last cell in the first row - the manager's name. There is no manager.name field in the Editor form, so the error will be triggered.

Resolution

To resolve this error, there are two options:

editField property

The simplest methodAdd a editField option to the DataTable column with the field name for field to be edited when editing is activated on that column. In the above example, the DataTables initialisation would be altered to be:

$('#example').DataTable( {
    ajax: "../php/staff.php",
    columns: [
        { data: "first_name" },
        { data: "last_name" },
        { data: "manager.name", editField: "manager.id" }
    ]
} );

Note the addition of editField: "manager.id" to the column configuration for the third column, allowing Editor to determine which field should be edited.

Method call

The second option is to pass in the field name that you wish to edit as the second parameter to bubble() and inline().

In the example above, the code would be modified to be:

editor.inline( $('#example tbody tr:first-child td:last-child'), 'manager.id' );

Note the addition of the manager.id string to the function call to make it clear to Editor which field is to be edited.