This chunk of code was working previously, and now it's not...not sure what I did. I have a combo of inline editing and bubble editing for each row. Some columns are not editable, others are inline, and one is a bubble with two fields to edit.
JS:
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "./api/mytime",
table: "#ProductionData",
fixedHeader: true,
fields: [
{
"label": "Task Name:",
"name": "logan_dvprTasks.taskNumber",
"type": "select"
},
{
"label": "Misc. Task Name/Desc:",
"name": "logan_dvprTasks.miscTaskName"
},
{
"label": "Task Time In:",
"name": "logan_dvpr_timeLog.timein",
"type": "datetime",
"def": function () { return new Date(); },
format: 'MM-DD-YYYY h:mm A'
},
{
"label": "Task Time Out:",
"name": "logan_dvpr_timeLog.timeout",
"type": "datetime",
"def": function () { return new Date(); },
format: 'MM-DD-YYYY h:mm A'
},
{
"label": "Time Notes:",
"name": "logan_dvpr_timeLog.timeNotes",
"type": "textarea"
}
],
formOptions: {
inline: {
onBlur: 'submit'
}
}
});
$('#ProductionData').on('click', 'tbody td:nth-child(4)', function (e) {
editor.bubble(this);
});
$('#ProductionData').on('click', 'tbody td:not(:first-child):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(8))', function (e) {
editor.inline(this, {
onBlur: 'submit'
});
});
var table = $('#ProductionData').DataTable( {
ajax: './api/mytime',
order: [6, 'desc'],
fixedHeader: true,
columns: [
{
"data": null,
"defaultContent": "",
"orderable": false,
"className": "select-checkbox"
},
{
"data": "logan_dvpr.jobNumber"
},
{
"data": "logan_dvpr.dvprNumber"
},
{
"data": "logan_dvpr.customerDesc"
},
{
"data": null,
"render": function (data, type, row) {
var misc = "";
if (data.logan_dvprTasks.miscTaskName != null) misc = data.logan_dvprTasks.miscTaskName;
return data.logan_dvprTasks.taskName + ' ' + misc;
},
"editField": ["logan_dvprTasks.taskNumber", "logan_dvprTasks.miscTaskName"], "className": "noneditable"
},
{
"data": "logan_dvpr_timeLog.timein", "className": "editable", "editField": "logan_dvpr_timeLog.timein"
},
{
"data": "logan_dvpr_timeLog.timeout", "className": "editable", "editField": "logan_dvpr_timeLog.timeout"
},
{
"data": function (data, type, row) {
// Calculate the difference between the two dates
return datediff('h', data.logan_dvpr_timeLog.timein,data.logan_dvpr_timeLog.timeout)
},
},
{
"data": "logan_dvpr_timeLog.timeNotes", "className": "editable", "editField": "logan_dvpr_timeLog.timeNotes"
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
lengthChange: true,
lengthMenu: [[10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
pageLength: 50
});
new $.fn.dataTable.Buttons(table, [
{
extend: "create",
text: "Add Missing Time Record",
editor: editor,
formButtons: [
'Save',
{ label: 'Cancel', fn: function () { this.close(); } }
]
},
{
extend: "edit",
editor: editor,
formButtons: [
'Save',
{ label: 'Cancel', fn: function () { this.close(); } }
]
},
{
extend: "remove",
editor: editor,
formMessage: function (e, dt) {
return 'Are you sure you want to delete this record?';
},
formButtons: [
'Delete',
{ label: 'Cancel', fn: function () { this.close(); } }
]
},
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]);
table.buttons().container()
.prependTo($('div.fg-toolbar:eq(0)', table.table().container()));
});
I am getting the error: uncaught exception: Cannot edit more than one field inline at a time on the field that has the two editable fields in the bubble. I have specified that this field is to be a bubble, and disabled it from the inline editing, but it's still trying to inline edit. What am I doing wrong?
