Hi
I have setup a datatable with an inline editor. This is for data collection only and has no ajax calls.
On one specific cell I want to format the data (and then eventually process further).
So I have setup the editor, databable, callback and the function that does the actual processing (code is below).
Everything works ok until I try resetting the cell value. I get the following error:
Any help would be appreciated.
Thanks
Dov
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?
at g (https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:49:89)
at da (https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:49:311)
at s.<anonymous> (https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:144:308)
at s.data (https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js:130:3)
at Editor.edit (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:6859:9)
at Editor._dataSource (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:4873:13)
at Editor._submitSuccess (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:5941:11)
at http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:5766:9
at Editor._submitTable (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:5833:2)
at Editor._submit (http://localhost:8090/resources/Editor-1.8.0/js/dataTables.editor.js:5762:13)
//Editor Definition
receiptEditor = new $.fn.dataTable.Editor({
table: "#receiptTable",
fields: [
{
label: "Tools",
name: "tools"
},
{
label: "ledger_type",
name: "ledger_type",
type: "select",
options: lineTypeOptions
},
{
label: "Description",
name: "description"
},
{
label: "AccountName",
name: "accountName",
id: "receiptCustomer"
},
{
label: "CustomerReference",
name: "customerReference"
},
{
label: "Note",
name: "note"
},
{
label: "LineReference",
name: "lineReference"
},
{
label: "ReceiptAmount",
name: "amount"
},
{
label: "NoteButton",
name: "noteButton"
},
{
label: "Icons",
name: "icons"
},
{
label: "Remove",
name: "remove"
},
{
label: "CustomerId",
name: "customerId"
},
{
label: "LineNumber",
name: "lineNumber"
}
]
});
//Setup Inline editing
$('#receiptTable').on( 'click', 'tbody td', function (e) {
receiptEditor.inline();
});
//Datable instance
rctTable = $("#receiptTable").DataTable({
columnDefs: [
{ className: "tools", targets: [0] },
{ className: "ledgerType", targets: [1] },
{ className: "receiptDescription", targets: [2] },
{ className: "receiptCustomer", targets: [3] },
{ className: "receiptCustomerReference", targets: [4] },
{ className: "receiptNote", targets: [5] },
{ className: "receiptLineReference", targets: [6] },
{ className: "receiptAmount", targets: [7] },
{ className: "receiptAllocated", targets: [8] },
{ className: "receiptOnAccount", targets: [9] },
{ className: "receiptCustomerId", targets: [13] },
{ className: "receiptLineNumber", targets: [14] }
],
dom: "Brt",
columns: [
{
data: "tools",
render: function(data, type, row) {
return "<i id='transactionsWindow' class='fas fa-receipt transactionsWindow iconHidden'></i>"; // <i id='receiptBlueCircle' class='fas fa-dot-circle receiptBlueCircle blueIcon'></i>
}
},
{
data: "ledger_type",
render: function(data, type, row) {
return lineTypeOptions[data - 1].label;
}
},
{
data: "description",
render: function(data, type, row) {
return receiptDescription;
}
},
{
data: "accountName"
},
{
data: "customerReference"
},
{
data: "note"
},
{
data: "lineReference"
},
{
data: "amount",
classname: "receiptAmount"
},
{
data: "allocated",
classname: "receiptAllocated",
render: function(data, type, row) {
return "0.00";
}
},
{
data: "onAccount",
classname: "receiptOnAccount",
render: function(data, type, row) {
return "0.00";
}
},
{
data: "noteButton",
render: function(data, type, row) {
return "<i class='fas fa-pencil-alt noteButton' style='text-align:center; width:1%'></i>";
}
},
{
data: "icons",
render: function(data, type, row) {
return "<i class='fas fa-plus plusButton table-add' style='text-align:left; width:1%'></i>";
}
},
{
data: "remove",
render: function(data, type, row) {
return "<i class='fas fa-times table-remove' style='text-align:center; width:1%'></i>";
}
},
{
data: "customerId"
},
{
data: "lineNumber"
}
],
ordering: false,
keys: {
columns: ':not(:first-child)',
keys: [ 9 ],
editor: receiptEditor,
editOnFocus: true
},
select: {
select: true,
style: "single",
selector: "td:first-child",
blurable: true
},
buttons: [
{
extend: "remove",
editor: receiptEditor
}
]
});
//Callback on blur of receiptAmount cell
$("#receiptTable").on(
"focusout",
".receiptAmount",
function() {
receiptAmountChanged(this);
}
);
//function called by blur Callback
function receiptAmountChanged(current){
var rowIndex = rctTable.row( rctTable.cell(current).index() ).index()
var receiptAmount = rctTable.cell(current).data();
receiptAmount = displayAsMoney(receiptAmount);
rctTable.cell(current).data(receiptAmount).draw();
};
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
