I am using a editor made by editor generator and adding in a child editor as per instructions here;
https://datatables.net/blog/2019/parent-child-editing-in-child-rows#DataTable-configuration
and with the final assembly example here;
https://datatables.net/media/blog/2019-01-11/edit.js
When I edit a row in a child table, and click "Update" the row disappears.
Step #1 - To recreate this issue select a row in a child table and click "EDIT"
![]()
Step #2 - Perform an edit and click "UPDATE"
![]()
Step #3 - Notice the row in the child table dissapears
![]()
Step #4 - Refreshing the browser tab, brings the child table row back (now edited)
![]()
This function is never getting triggered. Even though its a clone of the code in the instructions (1st link above) and placed in the exact same spot as the code for the assembly example (2nd link above).
childEditor.on('submitSuccess', function () {
console.log =("submit success triggered")
childTable.rows().every(function () {
if (this.child.isShown()) {
updateChild(this);
}
});
});
Here is all the code together.;
/*
* Editor client script for DB table GR_AlternativeBilling
* Created by http://editor.datatables.net/generator
*/
addEventListener("DOMContentLoaded", function () {
function createChild(row, data) {
// This is the table we'll convert into a DataTable
//var table = $('<table class="display childGrid" width="100%"/>');
var table = $('<table class="display childGrid" width="100%"/>');
// Display it the child row
row.child(table).show();
var childEditor = new $.fn.dataTable.Editor({
ajax: {
url: '/AlternativeBilling/DataTransport_Notes',
data: function (d) {
d.site = row.TableID;
}
},
table: table,
fields: [{
label: "NoteType:",
name: "NoteType"
}, {
label: "Note:",
name: "Note"
}, {
label: "EditedBy",
name: "EditedBy"
}, {
label: "EditedDate",
name: "EditedDate"
}
],
select: true,
processing: true,
});
// Initialise as a DataTable
var childTable = table.DataTable({
"orderCellsTop": true,
"processing": true, // for show progress bar
"language": {
"processing": '<span class="sr-only h1" >Loading...</span> '
},
"filter": false, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"pageLength": 25,
"lengthChange": true,
"search": {
"caseInsensitive": true
},
"responsive": false, //for automatic child tables
ajax: '/AlternativeBilling/DataTransport_Notes?TableName=AlternativeBilling&TableID=' + data.TableID,
columns: [
{
"data": "NoteType",
"title": "Note Type",
},
{
"data": "Note",
"title": "Note",
},
{
"data": "EditedBy",
"title": "Edited By",
},
{
"data": "EditedDate",
"title": "Edit Date",
},
],
layout: {
topStart: {
buttons: [
{ extend: 'create', editor: childEditor },
{ extend: 'edit', editor: childEditor },
{ extend: 'remove', editor: childEditor }
]
}
},
select: true,
processing: true,
});
childEditor.on('submitSuccess', function () {
console.log =("submit success triggered")
childTable.rows().every(function () {
if (this.child.isShown()) {
updateChild(this);
}
});
});
}
var editor = new DataTable.Editor({
ajax: '/AlternativeBilling/DataTransport',
table: '#GR_AlternativeBilling',
fields: [
{
"label": "Patient Name",
"name": "PatientName"
},
{
"label": "Insurance:",
"name": "Insurance"
},
{
"label": "Employer:",
"name": "Employer"
},
{
"label": "Contact Name:",
"name": "ContactName"
},
{
"label": "Contact Phone:",
"name": "ContactPhone"
},
{
"label": "Contact Email:",
"name": "ContactEmail"
},
{
"label": "Method:",
"name": "Method"
},
{
"label": "Number Of Visits:",
"name": "NumberOfVisits"
}
]
});
var mainTable = new DataTable('#GR_AlternativeBilling', {
"search": {
"caseInsensitive": true
},
"serverSide": true,
ajax: {
"url": "/AlternativeBilling/DataTransport",
"type": "POST",
"datatype": "json",
},
columns: [
{
"data": "PatientName"
},
{
"data": "Insurance"
},
{
"data": "Employer"
},
{
"data": "ContactName"
},
{
"data": "ContactPhone"
},
{
"data": "ContactEmail"
},
{
"data": "Method"
},
{
"data": "NumberOfVisits"
},
{
className: 'details-control dt-control',
orderable: false,
data: null,
defaultContent: '',
width: '10%'
},
],
layout: {
topStart: {
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
}
},
select: true,
processing: true,
});
// Activate an inline edit on click of a table cell
mainTable.on('click', '> tbody > td:not(:last-child)', function (e) {
editor.inline(this);
});
$('#GR_AlternativeBilling tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = mainTable.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
destroyChild(row);
tr.removeClass('shown');
}
else {
// Open this row
//format(row.data());
createChild(row, row.data());
tr.addClass('shown');
}
});
function updateChild(row) {
$("table", row.child())
.DataTable()
.ajax.reload();
}
function destroyChild(row) {
var table = $("table", row.child());
table.detach();
table.DataTable().destroy();
// And then hide the row
row.child.hide();
}
function updateChild(row) {
$('table', row.child()).DataTable().ajax.reload();
}
});
