Inline Editing, DateTime and the onChange event

datatables_admin@myvoicecomm.com

I'm working with the datetime field type for inline editing. I'm just using the standard datatables library for js/css. I am NOT using the PHP editor library. While I have it working, I had to put in a little workaround in part of the process (see the inline formOptions in the code below). The issue that I'm having is that when I click on a field and select a date from the datepicker, the date gets entered into the field, but focus still stays on the field. This seems to prevent the onChange event from firing off and thus preventing the form from being submitted. I've provided my configuration below for more visibility.

let tableColumns = [
            {
                title: "Profile",
                data: "profile_id",
                orderable: false
            },
            ...Customer/Company Fields
            {
                title: "Has Serialized Products",
                data: "has_serialized_products",
                className: 'dt-body-center',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return renderCheckbox(data, 'editor-has_serialized_products');
                    }

                    return data;
                }
            },
            {
                title: "Auto Approve Orders",
                data: "auto_approve_orders",
                className: 'dt-body-center',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return renderCheckbox(data, 'editor-auto_approve_orders');
                    }

                    return data;
                }
            },
            {
                title: "Price Diff Check",
                data: "price_diff_check",
                className: 'dt-body-center',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return renderCheckbox(data, 'editor-price_diff_check');
                    }

                    return data;
                }
            },
            {
                title: "Allow Customer Stock Model Edits",
                data: "stock_model_editable",
                className: 'dt-body-center',
                render: function (data, type, row) {
                    if (type === 'display') {
                        if (!row.has_stock_model) {
                            return 'Stock Model Not Found';
                        }

                        return renderCheckbox(data, 'editor-stock_model_editable');
                    }

                    return data;
                }
            },
            {
                title: "Stock Model Edit Start Date",
                data: "stock_model_start_date",
                className: 'sm-start-date',
                render: function (data, type, row) {
                    if (type === 'display') {
                        if (!row.has_stock_model) {
                            return 'Stock Model Not Found';
                        }

                        if (!data) {
                            return "{{now()->format('Y-m-d')}}";
                        }
                    }

                    return data;
                }

            },
            {
                title: "Stock Model Edit End Date",
                data: "stock_model_end_date",
                className: 'sm-end-date',
                render: function (data, type, row) {
                    if (type === 'display') {
                        if (!row.has_stock_model) {
                            return 'Stock Model Not Found';
                        }

                        if (!data) {
                            return "{{now()->format('Y-m-d')}}";
                        }
                    }

                    return data;
                }
            }
        ];

        let editorFields = [
            {
                name: 'profile_id',
                type: 'hidden'
            },
            ... Customer/Company Fields
            {
                label: "Has Serialized Products",
                name: "has_serialized_products",
                type: 'checkbox',
                options: [{ label: '', value: 1 }]
            },
            {
                label: "Auto Approve Orders",
                name: "auto_approve_orders",
                type: 'checkbox',
                options: [{ label: '', value: 1 }]
            },
            {
                label: "Price Diff Check",
                name: "price_diff_check",
                type: 'checkbox',
                options: [{ label: '', value: 1 }]
            },
            {
                label: "Allow Customer Stock Model Edits",
                name: "stock_model_editable",
                type: 'checkbox',
                options: [{ label: '', value: 1 }]
            },
            {
                label: "Stock Model Edit Start Date",
                name: "stock_model_start_date",
                type: 'datetime'
            },
            {
                label: "Stock Model Edit End Date",
                name: "stock_model_end_date",
                type: 'datetime'
            }
        ]

        $(document).ready(function () {
            let editor = new $.fn.dataTable.Editor({
                table: "#vmiProfileTable",
                idSrc: 'profile_id',
                fields: editorFields,
                ajax: {
                    create: {
                        type: "POST",
                        url: "{{ route('vmi.profiles.create') }}"
                    },
                    edit: {
                        type: "PUT",
                        url: "{{ route('vmi.profiles.edit') }}"
                    },
                    remove: {
                        type: "DELETE",
                        url: "{{ route('vmi.profiles.delete') }}"
                    }
                },
            }).on('initCreate', function () {
                editor.show();
                editor.hide(['stock_model_editable', 'stock_model_start_date', 'stock_model_end_date']);
            }).on('initEdit', function () {
                editor.show();

                if (table.row(editor.modifier()).data().has_stock_model) {
                    editor.hide(['customer_id', 'integration_id']);
                } else {
                    editor.hide(['customer_id', 'integration_id', 'stock_model_editable', 'stock_model_start_date', 'stock_model_end_date']);
                }
            });

            let table = $('#vmiProfileTable').DataTable({
                dom: `<"top-nav"fB>
                        <""rt>
                        <"footer"ips>`,
                language: {
                    info: "Record(s): _TOTAL_ | Page",
                    paginate: {previous: '‹', next: '›',},
                    select: null
                },
                pagingType: 'simple_numbers',
                columns: tableColumns,
                rowId: 'profile_id',
                data: {{ Js::from($profiles) }},
                select: {
                    style: 'single',
                    selector: 'td:not(:first-child):nth-last-child(n+7)',
                },
                buttons: [
                    {
                        extend: 'create',
                        editor: editor,
                        formButtons: [
                            {
                                label: 'Cancel',
                                fn: function () {
                                    this.close();
                                }
                            },
                            'Save'
                        ]
                    },
                    {
                        extend: "remove",
                        editor: editor
                    },
                    {
                        extend: 'collection',
                        text: 'Export ',
                        buttons: ['copy', 'excel', 'csv', 'pdf', 'print']
                    }

                ]
            });

            table.on('click', 'td.sm-start-date, td.sm-end-date', function (e) {
                if (table.row(this).data().has_stock_model) {
                    editor.inline(this, {
                        onBlur: 'submit',
                        onReturn: 'submit',
                        submit: 'all'
                    });
                }
            });

            table.on('change', 'input.editor-has_serialized_products, input.editor-auto_approve_orders, input.editor-stock_model_editable, input.editor-price_diff_check', function () {
                const editorField = this.className.replace('editor-', '');
                editor.edit(this.closest('tr'), false)
                    .set(editorField, this.checked ? 1 : 0)
                    .submit();
            });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

If I'm understanding correctly, you want to submit the form as soon as the mouse selects an option from the date picker - is that correct?

I experimented with this example a bit and came up with this:

editor.on('open', function () {
  editor.field('start_date').input().on('change', function (e, d) {
    if (! d) {
      editor.submit();
    }
  });
});

editor.on('close', function () {
  editor.field('start_date').input().off('change');
});

When the form is opened it adds a change event listener, which checks that the value set is done by the end user, not programmatically. It then removes the event listener on close.

I didn't think it would be necessary to add and remove the listener, but there is a change event happening when the initial value is set that is causing a problem. I'll need to dig further into that.

Allan

datatables_admin@myvoicecomm.com

@allan this is exactly what I was trying to do. Kind of how I expected the datetime field to work out of the box. From the sounds of it this is how it's supposed to work and I just discovered a bug lol. As always appreciate your quick response and help. I'll be on the look out for a permanent fix when it comes, but this works just fine for now