Editor has issues with data in some cases

resqonline

Debugger code (debug.datatables.net): https://debug.datatables.net/awuweq
Error messages shown: none
Description of problem:
I have an editor called bookingeditor in two different setups: a) for the bookingtable and b) inside another editor datatables field.
In case b) the editor has no trouble loading the correct values from an entry into the edit mask, however in case a) the editor mask is always empty or in some cases uses the wrong id (like from page 300 or something).

Here is the setup of the editor:

/* Booking Editor */
var bookingfields = [
    {
        label: "ID",
        name: "id",
    }, {
        label: "Kursnummer",
        name: "kurs_id",
        def: kursnummer,
    }, {
        label: "Kontakt",
        name: "contact_id",
        type: 'select2',
        options: contactselect.data,
        placeholder: "auswählen",
    }, {
        label: "Betrag",
        name: "amount",
    }, {
        label: "Reduzierter Preis",
        name: "discount",
        type: 'checkbox',
        options: [{ label: "Reduzierter Preis(R)", value: 1 }],
        separator: '',
        unselectedValue: 0,
    }, {
        label: "Voraussetzungen",
        name: "qualify",
        type: 'checkbox',
        options: [{ label: "erfüllt Voraussetzungen", value: 1 }],
        separator: '',
        unselectedValue: 0,
    }, {
        label: "Übernachtung",
        name: "overnight",
        type: 'checkbox',
        options: [{ label: "Übernachtung", value: 1 }],
        separator: '',
        unselectedValue: 0,
    }, {
        label: "Status",
        name: "status",
        type: "select",
        options: [
            { label: 'unbestätigt', value: 'open' },
            { label: 'bestätigt', value: 'confirmed' },
            { label: 'Warteliste', value: 'waiting' },
            { label: 'storniert', value: 'storno' },
            { label: 'abgeschlossen', value: 'completed' },
        ],
        def: 'open',
    }, {
        label: "Stornogebühr",
        name: "stornocost",
    }, {
        name: "old_status",
        type: 'hidden',
        def: 'open',
    }, {
        label: "Datum",
        name: "add_date",
        type: 'datetime',
        displayFormat: 'DD.MM.YYYY',
        wireFormat: 'YYYY-MM-DD',
    }, {
        label: "Notizen",
        name: "booking_notes",
        type: "textarea",
    }, {
        label: "UE teilgenommen",
        name: "ue_attended",
        def: "0",
    }];

bookingeditor = new DataTable.Editor( {
    template: "#bookings_form",
    idSrc: "id",
    formOptions: {
        focus: "amount",
    },
    fields: bookingfields,
    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",
        },
    },
} );

and these are the two cases of where the editor is included:

contacteditor = new DataTable.Editor( {
            table: '#esicontactstable',
            template: '#contacts_form',
            idSrc: "customer_id",
            formOptions: {
                focus: "firstname",
            },
            fields: [{
                label: "ID",
                name: "id",
                type: 'hidden',
            },{
                label: "Kd.Nr.",
                name: "customer_id",
            }, {
                label: "Vorname",
                name: "firstname"
            }, {
                label: "Nachname",
                name: "lastname"
            }, {
                label: "E-Mail",
                name: "email"
            }, {
                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 },
                        'copyitem',
                    ],
                    columns: [
                        { data: 'id', title: 'ID' },
                        { data: 'contact_id', title: 'Kontakt' },
                        { data: 'kurs_id', title: 'Kurs' },
                        { data: 'amount', title: 'Betrag' },
                        { data: 'payed_amount', title: 'Bezahlt' },
                        { data: 'add_date', title: 'Datum'},
                        { data: null, title: 'Status', render: function ( data, type, row ){
                            var label;
                            switch( data.status ){
                                case 'open':
                                    label = "unbestätigt";
                                    break;
                                case 'confirmed':
                                    label = "bestätigt";
                                    break;
                                case 'waiting':
                                    label = "Warteliste";
                                    break;
                                case 'storno':
                                    label = "storniert";
                                    break;
                                case 'cancelled':
                                    label = "Termin abgesagt";
                                    break;
                                case 'completed':
                                    label = "abgeschlossen";
                                    break;
                                default:
                                    label = "";
                            }
                            return label;
                        } },
                    ],
                    columnDefs: [
                        {
                            target: 1,
                            visible: false,
                        },
                        {
                            target: [3, 4],
                            className: 'dt-body-right',
                            render: DataTable.render.number(null, null, 2, '', ''),
                        },
                        {
                            target: 5,
                            render: DataTable.render.datetime('DD.MM.YYYY'),
                        }
                    ],
                    order: [[0, 'desc']],
                    searching: false,
                    lengthChange: true,
                    processing: true,
                    serverSide: true,
                },
            },
            ],
            ajax: {
                create: {
                    type: 'POST',
                    url: datatablesajax.url,
                    data: {
                        action: 'createcontact',
                    },
                    dataType: "json",
                },
                edit: {
                    type: 'POST',
                    url: datatablesajax.url,
                    data: {
                        action: 'editcontact',
                    },
                    dataType: "json",
                },
                remove: {
                    type: 'POST',
                    url: datatablesajax.url,
                    data: {
                        action: 'deletecontact',
                    },
                    dataType: "json",
                },
            }
        } );

/* Bookings Table */
var bookingstable = $("#esibookingstable").DataTable({
    language: {
        url: datatablesajax.pluginDirURI + 'includes/datatables/datatables.german.json'
    },
    serverSide: true,
    processing: true,
    ajax: {
        url: datatablesajax.url + '?action=getbookingstable',
        type: 'POST', // Use POST method for sending data to the server
        data: function (d) {
            // Include min and max date values in the Ajax request if they are valid
            var minDateVal = minDate.val();
            var maxDateVal = maxDate.val();

            if (isValidDate(minDateVal)) {
                d.minDate = moment(minDateVal, 'DD.MM.YYYY').format('YYYY-MM-DD');
            }

            if (isValidDate(maxDateVal)) {
                d.maxDate = moment(maxDateVal, 'DD.MM.YYYY').format('YYYY-MM-DD');
            }
        },
    },
    columns: [
        { data: 'id', title: 'ID' },
        { data: 'kurs_id', title: 'Kurs' },
        { data: null, title: 'Kontakt', render: function ( data, type, row ) {
            return data.customer_id+' | '+data.contact;
        } },
        { data: 'course_level', title: 'Stufe' },
        { data: 'amount', title: 'Betrag', render: DataTable.render.number(null, null, 2, '', '') },
        { data: 'payed_amount', title: 'Bezahlt', render: DataTable.render.number(null, null, 2, '', '') },
        { data: 'add_date', title: 'Datum', render: DataTable.render.datetime('DD.MM.YYYY') },
        { data: null, title: 'Status', render: function ( data, type, row ){
            var label;
            switch( data.status ){
                case 'open':
                    label = "unbestätigt";
                    break;
                case 'confirmed':
                    label = "bestätigt";
                    break;
                case 'waiting':
                    label = "Warteliste";
                    break;
                case 'storno':
                    label = "storniert";
                    break;
                case 'cancelled':
                    label = "Termin abgesagt";
                    break;
                case 'completed':
                    label = "abgeschlossen";
                    break;
                default:
                    label = "";
            }
            return label;
        } },
    ],
    columnDefs: [
        {
            targets: 4,
            className: 'dt-body-right',
        }
    ],
    order: [[0, 'desc']],
    autoFill: {
        editor: bookingeditor,
    },
    select: {
        info: false,
    },
    responsive: true,
    lengthChange: true,
    paging: true,
    pageLength: 25,
    rowId: 'id',
    dom: 'Bfitlp',
    buttons: [
        { extend: "createitem", editor: bookingeditor },
        { extend: "edititem", editor: bookingeditor },
        { extend: "removeitem", editor: bookingeditor },
        'copyitem', 'excelexport', 'reload',
    ],
});

In my datatables setup script, the editors are set up first, then the tables - in case that could be an issue.

Any ideas why case b) works as expected and case a) isn't?

allan

I'm not quite sure what you mean by "mask" in this context - you don't have a mask plug-in input field, so do you mean the list of options in a select list, or something else?

For this rest of this reply, I'll assume that you mean that the list of options for the select aren't being populated (and my apologies if I've misunderstood, please correct me!).

What using select it listens for the xhr from DataTables to look at the JSON response, find any options to be displayed and show them. However, in old versions of Editor / DataTables, that event only happened on tables which are in the document - your nested table isn't in the document until shown, so it couldn't trigger the xhr.

So perhaps, the key question is, what versions of DataTables and Editor are you using?

Allan

resqonline

I mean the editor form, sorry for the confusion
The form fields should obviously be pre-filled with the data from the selected item to be edited, but the form is completely empty. The rowID of the table is clearly set as I can see the tr ids.

I am currently using all the up-to-date versions of datatables and editor.

allan

Are you able to PM me a link to the page showing the issue so I can take a look into it please? I can't immediately think of a reason why the form would be empty I'm afraid. I'll need to trace it through to understand what is going wrong.

Allan

resqonline

So, conclusion:
Each table needs its own editor instance and the editors cannot even share the same template, but can use the same fields. For example:

var paymentfields = [
    {
        label: "ID",
        name: "id",
        type: "hidden",
    }, {
        label: "Beleg",
        name: "beleg_id",
        type: "hidden",
    }, {
        label: "Buchung",
        name: "booking_id",
        type: "hidden",
    }, {
        label: "Zahlungsdatum",
        name: "paydate",
        type: "datetime",
        displayformat: "DD.MM.YYYY",
        wireFormat: "YYYY-MM-DD",
        def: currentDate,
    }, {
        label: "Rechnungsbetrag",
        name: "fullamount",
        type: "display"
    }, {
        label: "Zahlbetrag",
        name: "amount",
    }, {
        label: "Zahlungsmethode",
        name: "method",
        type: "select",
        options: [
            { label: 'Barzahlung', value: 'bar' },
            { label: 'Banküberweisung', value: 'bank' },
            { label: 'Guthaben', value: 'balance' },
            { label: 'Kreditkarte', value: 'creditcard' },
            { label: 'PayPal', value: 'paypal' },
            { label: 'Lastschrift', value: 'directdebit' },
            { label: 'Bankomat', value: 'bankomat' },
            { label: 'Dauerauftrag', value: 'transfer' },
        ],
        placeholder: 'auswählen',
    }, {
        label: "Kontakt",
        name: "contact_id",
        type: "select2",
        options: contactselect.data,
        placeholder: "auswählen",
    }, {
        label: "Bankbeleg",
        name: "bank_beleg",
        type: "text",
}];

// regular editor instance with a table assigned
paymenteditor = new DataTable.Editor( {
    table: "#payments",
    idSrc: "id",
    fields: paymentfields,
    ajax: {
        create: {
            type: 'POST',
            url: datatablesajax.url,
            data: {
                action: 'createpayment',
            },
            dataType: "json",
        },
        edit: {
            type: 'POST',
            url: datatablesajax.url,
            data: {
                action: 'editpayment',
            },
            dataType: "json",
        },
        remove: {
            type: 'POST',
            url: datatablesajax.url,
            data: {
                action: 'deletepayment',
            },
            dataType: "json",
        },
    }
} );

// editor for a datatable field inside another editor
inexpaymenteditor = new DataTable.Editor( {
    ajax: {
        url: datatablesajax.url + '?action=getpaymentstable',
        type: 'POST',
        data: function ( d ) {
            d.beleg_id = paysearch;
        }
    },
    idSrc: "id",
    fields: paymentfields,
    ajax: {
        create: {
            type: 'POST',
            url: datatablesajax.url,
            data: {
                action: 'createpayment',
            },
            dataType: "json",
        },
        edit: {
            type: 'POST',
            url: datatablesajax.url,
            data: {
                action: 'editpayment',
            },
            dataType: "json",
        },
        remove: {
            type: 'POST',
            url: datatablesajax.url,
            data: {
                action: 'deletepayment',
            },
            dataType: "json",
        },
    }
} );