Editor: Bubble and Inline Together in Same Row

kmbonin

This chunk of code was working previously, and now it's not...not sure what I did. I have a combo of inline editing and bubble editing for each row. Some columns are not editable, others are inline, and one is a bubble with two fields to edit.

JS:

var editor;

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "./api/mytime",
        table: "#ProductionData",
        fixedHeader: true,
        fields: [
            {
                "label": "Task Name:",
                "name": "logan_dvprTasks.taskNumber",
                "type": "select"
            },
            {
                "label": "Misc. Task Name/Desc:",
                "name": "logan_dvprTasks.miscTaskName"
            },
            {
                "label": "Task Time In:",
                "name": "logan_dvpr_timeLog.timein",
                "type": "datetime",
                "def": function () { return new Date(); },
                format: 'MM-DD-YYYY h:mm A'
            },
            {
                "label": "Task Time Out:",
                "name": "logan_dvpr_timeLog.timeout",
                "type": "datetime",
                "def": function () { return new Date(); },
                format: 'MM-DD-YYYY h:mm A'
            },
            {
                "label": "Time Notes:",
                "name": "logan_dvpr_timeLog.timeNotes",
                "type": "textarea"
            }
        ],
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        }
    });
    $('#ProductionData').on('click', 'tbody td:nth-child(4)', function (e) {
        editor.bubble(this);
    });

    $('#ProductionData').on('click', 'tbody td:not(:first-child):not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(8))', function (e) {
        editor.inline(this, {
            onBlur: 'submit'
        });
    });
 
 
    var table = $('#ProductionData').DataTable( {
        ajax: './api/mytime',
        order: [6, 'desc'],
        fixedHeader: true,
        columns: [
            {
                "data": null,
                "defaultContent": "",
                "orderable": false,
                "className": "select-checkbox"
            },
            {
                "data": "logan_dvpr.jobNumber"
            },
            {
                "data": "logan_dvpr.dvprNumber"
            },
            {
                "data": "logan_dvpr.customerDesc"
            },            
            {
                "data": null,
                "render": function (data, type, row) {
                    var misc = "";
                    if (data.logan_dvprTasks.miscTaskName != null) misc = data.logan_dvprTasks.miscTaskName;
                    return data.logan_dvprTasks.taskName + ' ' + misc;
                },
                "editField": ["logan_dvprTasks.taskNumber", "logan_dvprTasks.miscTaskName"], "className": "noneditable"
            },
            {
                "data": "logan_dvpr_timeLog.timein", "className": "editable", "editField": "logan_dvpr_timeLog.timein"
            },
            {
                "data": "logan_dvpr_timeLog.timeout", "className": "editable", "editField": "logan_dvpr_timeLog.timeout"
            },
            {
                "data": function (data, type, row) {
                    // Calculate the difference between the two dates
                    return datediff('h', data.logan_dvpr_timeLog.timein,data.logan_dvpr_timeLog.timeout)
                },
            },
            {
                "data": "logan_dvpr_timeLog.timeNotes", "className": "editable", "editField": "logan_dvpr_timeLog.timeNotes"
            }
            ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        lengthChange: true,
        lengthMenu: [[10, 25, 50, 75, -1], [10, 25, 50, 75, "All"]],
        pageLength: 50
    });

    

    new $.fn.dataTable.Buttons(table, [

        {
            extend: "create",
            text: "Add Missing Time Record",
            editor: editor,
            formButtons: [
                'Save',
                { label: 'Cancel', fn: function () { this.close(); } }
            ]
        },
        {
            extend: "edit",
            editor: editor,
            formButtons: [
                'Save',
                { label: 'Cancel', fn: function () { this.close(); } }
            ]
        },
        {
            extend: "remove",
            editor: editor,
            formMessage: function (e, dt) {
                return 'Are you sure you want to delete this record?';
            },
            formButtons: [
                'Delete',
                { label: 'Cancel', fn: function () { this.close(); } }
            ]
        },
        {
            extend: 'collection',
            text: 'Export',
            buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        }
    ]);

    table.buttons().container()
        .prependTo($('div.fg-toolbar:eq(0)', table.table().container()));
    
});

I am getting the error: uncaught exception: Cannot edit more than one field inline at a time on the field that has the two editable fields in the bubble. I have specified that this field is to be a bubble, and disabled it from the inline editing, but it's still trying to inline edit. What am I doing wrong?

allan

I think the issue is that the inline selector is running as well.I suspect the issue is the :not() selector - you need to combine all the not conditions into a single :not() - e.g.:

'tbody td:not(:first-child,:nth-child(1),:nth-child(2)...)'

i.e. only have one :not(). I think that's how jQuery selectors work.

Allan