Table doesn't redraw after successful Editor submit, other nested table does
Table doesn't redraw after successful Editor submit, other nested table does
resqonline
Posts: 58Questions: 14Answers: 0
Debugger code (debug.datatables.net): https://debug.datatables.net/okoseg
Description of problem: I have the same table in two areas: one as a simple datatables tale, one inside an editor field. The one in the editor field is doing perfectly, reloads after submission and all that stuff it's supposed to do. The one that stands singular doesn't redraw after successful submission - both use the same ajax function in the background, so they get the same data in return. But the singular one apparently has issues with getting the correct row identifier (column with id in it).
This is the single table:
var bookingstable = $("#bookingstable").DataTable({
language: {
url: datatablesajax.pluginDirURI + 'includes/datatables/datatables.german.json'
},
ajax: {
url: datatablesajax.url + '?action=getbookingstable',
},
columns: [
{ data: 'id', title: 'ID' },
{ data: 'kurs_id', title: 'Kurs' },
{ data: null, title: 'Kontakt', render: function ( data, type, row ) {
return data.contact_id+' | '+data.contact;
} },
{ data: 'amount', title: 'Betrag' },
{ data: 'add_date', title: 'Datum', render: DataTable.render.datetime('DD.MM.YYYY') },
{ data: null, title: 'Status', render: function ( data, type, row ){...} },
],
columnDefs: [...],
searchCols: [...],
order: [[0, 'desc']],
autoFill: {
editor: bookingeditor,
},
select: {
info: false,
},
responsive: true,
lengthChange: true,
rowID: "id",
dom: 'Bfitlp',
buttons: [
{ extend: "create", editor: bookingeditor, key: {
key: 'n',
shiftKey: true
} },
{ extend: "edit", editor: bookingeditor, key: {
key: 'e',
shiftKey: true
} },
{ extend: "remove", editor: bookingeditor , key: {
key: 'd',
shiftKey: true
} },
],
});
this is the one inside another Editor:
contacteditor = new $.fn.dataTable.Editor( {
table: '#contactstable',
template: '#contacts_form',
idSrc: "customer_id",
fields: [ ...
{
label: "Buchungen",
name: "bookings",
type: "datatable",
editor: bookingeditor,
submit: false,
config: {
ajax: {
url: datatablesajax.url + '?action=getbookingsforcontact',
type: 'POST',
data: function ( d ) {
d.contact_id = bookingsearch;
}
},
buttons: [
{ extend: 'create', editor: bookingeditor },
{ extend: 'edit', editor: bookingeditor },
{ extend: 'remove', editor: bookingeditor },
],
columns: [
{ data: 'id', title: 'ID' },
...
],
columnDefs: [
{
target: 1,
visible: false,
},
...
],
order: [[0, 'desc']],
searching: false,
},
},
],
ajax: {...}
} );
and this is the editor for these tables:
bookingeditor = new $.fn.dataTable.Editor( {
template: '#bookings_form',
table: '#bookingstable',
idSrc: "id",
fields: [{
label: "ID",
name: "id",
}, ...
],
ajax: {
create: {
type: 'POST',
url: datatablesajax.url,
data: {
action: 'createbooking',
},
dataType: "json",
},
edit: {
type: 'POST',
url: datatablesajax.url,
data: {
action: 'editbooking',
},
dataType: "json",
},
remove: {
type: 'POST',
url: datatablesajax.url,
data: {
action: 'deletebooking',
},
dataType: "json",
},
},
} );
(I've abbreviated some of the fields and settings, because there are quite a lot of fields in there)
I have other tables and Editors, where the ID column is used as row identifier. This bookingeditor/bookingstable instance however seems to have a problem with that, but I am out of ideas what to check or change to make it work as it should. Any ideas or hints welcome!
This question has an accepted answers - jump to answer
Answers
Should be
rowId(rowId). That might be the only issue looking over it.Allan
@allan Thank you for noticing (had it wrong in all the tables), but unfortunately that doesn't seem to be the issue. The Editor submits alright, closes the lightbox, but doesn't redraw the table afterwards. Only after reloading the page I can see that changes had gone through alright.
There seems to be an issue with getting the value of selected row(s). For example if I use the "delete" button in editor and have selected either one or multiple rows, it always shows "0 selected rows". But the issue only appears in this one table and not in the others.
Could it be that there might be confusion in the DOM when using the same editor for a 'real' datatable and a datatable field in Editor?
What is the response from the server when you submit the edit action? Could you show me that JSON and also the parameters that are being submitted?
Allan
Sure, here is an example - is it a problem that I submit strings and get integers back for any ID values?
submitted:
returned:
No - the matching of ids is loosely type checked for exactly that reason. However, looking over that data (thank you) and again at the code above, in the Editor initialisation options you have:
I think that should probably be:
in this case. There is no
customer_idin the data.Allan
@allan no, you got confused by the two editors:
1) contacteditor has a datatables fields for bookings which uses bookingeditor
2) the bookings table also uses bookingeditor
the bookingeditor in 1) does everything right, shows the new data after submission (redraws table correctly)
the bookingeditor in 2) submits data correctly (see above answer with example data and return data) but doesn't redraw the table after succesful return
I actually use a similar setup for a second editor (paymenteditor) both for a datatables field in another editor and as editor for a table and noticed the same issue there: as a nested editor it works perfectly, as a regular one it doesn't. That was what made me think of maybe the editor instance in the DOM might get confused when using the same editor for both? I use a global variable for the editors and inside the $(document).ready(function($) I add the options like shown above, so I'm guessing the Editor instances are created correctly, right?
Oops - got confused! Apologies.
Unfortunately a single Editor instance isn't going to work for two different DataTables. Specifically note in your
bookingeditorinitialisation you have:Normally that would mean that the main booking table would be updated by that Editor instance, but the
datatablefield type does:i.e. it sets the DataTable for that Editor instance to the nested DataTable. Thus whenever that Editor does an update, it will always be done on that nested DataTable.
Unfortunately, there isn't a way to make this work other than to have a second Editor instance. While multiple Editor instances can operate on a single DataTable, the inverse is not true. A single Editor instance is tied to a specific DataTable.
Allan
Thank you @allan, makes total sense and I thought this might be an issue, just didn't know where to look.
I've now built a reload button to the table that updates the ajax data. When developing this project further I will optimize the code with more flexibility for the instances.