rowReorder used in nested edit throws error
rowReorder used in nested edit throws error
Tastefull
Posts: 2Questions: 1Answers: 0
Hi,
I don't have a link to test, as the code resided behind company restrictions.
I use rowReorder on the main DataTable(dataTable) it works perfectly with the php backend processing. I then on the first editor have a column definition of the type DataTable and on that config i use rowReorder again. And it seems to initialize fine, but when i drag and drop an item i get this error in the console
datatables.min.js?v=1:94 Uncaught Error: Unknown field name - t_package_lines.package_line_order
at M2H6YTI._jvVN_ [as field] (datatables.min.js?v=1:94:233348)
at M2H6YTI.BQSNM4 [as multiSet] (datatables.min.js?v=1:94:246070)
at s._mouseUp (datatables.min.js?v=1:351:6120)
at HTMLDocument.<anonymous> (datatables.min.js?v=1:351:4054)
at HTMLDocument.dispatch (datatables.min.js?v=1:14:39997)
at v.handle (datatables.min.js?v=1:14:37968)
Her is my client side code:
var childEditor = new DataTable.Editor({
ajax: {
url: 'data/packages_lines.php',
},
fields: [
{
label: 'Line tekst:',
name: 't_package_lines.package_line_displayname'
},
{
label: 'Vækstpakke:',
name: 't_package_lines.package_id',
type: 'hidden',
},
],
table: '#package-lines'
});
var editor = new DataTable.Editor({
ajax: 'data/packages.php',
fields: [
{
label: 'Rækkerfølge:',
name: 't_packages.package_order',
type: 'hidden'
},
{
label: 'Slug:',
name: 't_packages.package_slug',
type: 'text'
},
{
label: 'Pakke navn:',
name: 't_packages.package_displayname',
type: 'text'
},
{
label: 'Antal besøg:',
name: 't_packages.package_visits',
type: 'select',
options: [
{ label: '1 Besøg', value: 1 },
{ label: '2 Besøg', value: 2 },
{ label: '3 Besøg', value: 3 },
{ label: '4 Besøg', value: 4 }
]
},
{
label: 'Tilbydes fra:',
name: 't_packages.package_datestart',
format: 'yyyy-MM-DD 00:00:00',
type: 'datetime',
def: function () {
return new Date();
}
},
{
label: 'Tilbydes til:',
name: 't_packages.package_dateend',
format: 'yyyy-MM-DD 23:59:59',
type: 'datetime',
def: function () {
return new Date();
}
},
{
label: 'Intro:',
name: 't_packages.package_intro',
type: 'text'
},
{
label: 'Beskrivelse:',
name: 't_packages.package_text',
type: 'textarea'
},
{
label: 'Tagline:',
name: 't_packages.package_tagline',
type: 'text'
},
{
label: 'Pris udregnings metode:',
name: 't_packages.package_price_calc',
type: 'select',
options: [
{ label: '1 Besøg', value: 1 },
{ label: '2 Besøg', value: 2 },
{ label: '3 Besøg', value: 3 }
]
},
{
label: 'Automatisk på tilbudside:',
name: 't_packages.package_active_offer',
type: 'radio',
options: [
{ label: 'Nej', value: 0 },
{ label: 'Ja', value: 1 }
]
},
{
label: 'Billeder:',
name: 't_files[].file_id',
type: 'uploadMany',
display: function (fileId, counter) {
return '<img class="small-preview" src="' + editor.file('t_files', fileId).file_webpath.replace("/adm/", "/") + '"/>';
}
},
{
label: 'Tag linjer:',
name: 't_package_lines[].package_id',
type: 'datatable',
editor: childEditor,
submit: false,
optionsPair: {
value: 't_package_lines[].package_id'
},
config: {
language: {
url: 'https://cdn.datatables.net/plug-ins/1.11.3/i18n/da.json'
},
ajax: {
url: 'data/packages_lines.php',
type: 'post',
data: function (d) {
if (dataTable) {
var selected = dataTable.row({ selected: true });
if (selected.any()) {
d.t_package_lines = {};
d.t_package_lines.package_id = selected.data().t_packages.package_id;
}
}
}
},
buttons: [
{ extend: 'create', editor: childEditor },
],
rowReorder: {
dataSrc: 't_package_lines.package_line_order',
editor: childEditor
},
columns: [
{
title: 'Order',
data: 't_package_lines.package_line_order',
width: '1%',
className: 'reorder',
},
{
title: 'Linje',
data: 't_package_lines.package_line_displayname'
},
{
data: null,
className: 'dt-right',
defaultContent: '<i class="ri-edit-box-line childeditor-edit"></i> <i class="ri-delete-bin-7-line childeditor-delete"></i>',
orderable: false
}
],
columnDefs: [
{
targets: [1],
orderData:[0],
},
{
targets: [0,1],
orderable: false
},
],
paging: false,
scrollY: 300,
scrollCollapse: true,
select: false,
}
}
],
table: '#packages'
});
dataTable = $('#packages').DataTable({
pageLength: 50,
autoWidth: false,
language: {
url: 'https://cdn.datatables.net/plug-ins/1.11.3/i18n/da.json'
},
rowReorder: {
dataSrc: 't_packages.package_order',
editor: editor
},
select: false,
columnDefs: [
{
searchable: false
},
{
targets: [1],
orderData:[0],
},
{
targets: [0,1,2,3,4,5,6,7],
orderable: false
},
{
targets: [0,2,3,4,5,6,7],
width: '1%',
},
{
targets: [2,5],
className: "dt-center",
},
{
targets: [3,4],
className: "dt-left",
},
{
targets: [5],
render: function (data, type, row, meta) {
if (row.t_packages.package_active_offer) {
return 'Til';
} else {
return 'Fra';
}
}
},
{
targets: 7,
render: function (data, type, row, meta) {
return '<button type="button" class="btn btn-primary btn-wave viewPackage" data-id="' + row.t_packages.package_id + '"><i class="ri-eye-line"></i></button> <button type="button" class="btn btn-warning btn-wave editPackage editor-edit" data-id="' + row.t_packages.package_id + '"><i class="ri-edit-box-line"></i></button> <button type="button" class="btn btn-danger btn-wave deletePackage editor-delete" data-id="' + row.t_packages.package_id + '"><i class="ri-delete-bin-7-line"></i></button>';
}
},
],
columns: [
{ data: 't_packages.package_order', className: 'reorder' },
{ data: 't_packages.package_displayname' },
{ data: 't_packages.package_visits' },
{
data: 't_packages.package_datestart',
render: function(data, type, row){
if(type === "sort" || type === "type"){
return data;
}
return moment(data).format("MMMM, YYYY");
}
},
{
data: 't_packages.package_dateend',
render: function(data, type, row){
if(type === "sort" || type === "type"){
return data;
}
return moment(data).format("MMMM, YYYY");
}
},
{ data: 't_packages.package_active_offer' },
{
data: 't_files',
render: function (d) {
return d.length ? d.length + ' image(s)' : 'No image';
},
title: 'Billeder'
},
{ defaultContent : ""},
],
layout: {
topStart: {
buttons: [
{
text: 'Ny vækstpakke',
action: function () {
editor.create({
title: 'Opret ny vækstpakke',
buttons: 'Opret'
});
}
}
]
},
topEnd: {
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
{ extend: 'excel' },
{ extend: 'pdf' },
{ extend: 'print' },
],
}
},
ajax: {
url: "data/packages.php",
}
});
This question has an accepted answers - jump to answer
Answers
My guess is the JSON response doesn't contain the
t_packages.package_orderfield. Use the browser's network inspector with this example. Reorder some rows and view the Response data. You will see a response similar to this:Note the
rowReorder.dataSrcfield ofreadingOrderis in the response. Do you see thet_packages.package_orderfield in the JSON response when reordering on your page?Kevin
The response does contain the field in question as you can see here
The error happens as soon as i drop the item and before a request is sent to the backend. And the field is t_package_lines.package_line_order. So be sure to check out the correct rowReorder config (there is two). The one you refference works fine.
Both rowReorder setup are the same, both backend wise and frontend wise. The only difference is that one of them is nested in the editor.
Hi,
Thanks for the code and details. The issue is that you don't have a
t_package_lines.package_line_orderfield in your Editor configuration.You currently have two fields defined:
But the value to edit is being defined by
rowReorder.dataSrc, which doesn't have a field, hence the error the is coming from Editor.Add that field as a
hiddenfield (assuming you don't want the user to see it for a regular edit) and that should fix the issue.If you are interested in further details, this is the part of the code in RowReorder that is relevant here. Note how the
dataSrcproperty is used withmultiSet()to set the value for that property for each row that needs to be updated.Regards,
Allan