Inline Editor - keep getting error "this.node is not a function" when attempting to add tabbing.

jbtax

I am attempting to use the Editor in inline functionality but when I attach the "keys" tag to my table, which I need to tab through the results, I get an error "this.node is not a function".

Here is my editor/datatable setup:

        bookingTableEditor = new $.fn.DataTable.Editor({
            table: "#tblSeminarBookings",
            idSrc: "IdBooking",
            fields: [
                { label: "Booking Id:", name: "IdBooking", type: "readonly" },
                { label: "Person Id:", name: "FkIdPerson", type: "readonly" },
                { label: "F Name:", name: "AttendeeFName", type: "readonly" },
                { label: "M Name:", name: "AttendeeMName", type: "readonly" },
                { label: "L Name:", name: "AttendeeLName", type: "readonly" },
                {
                    label: "Attended:",
                    name: "Attended",
                    type: "checkbox",
                    separator: "|",
                    options: [{label: '', value: 1}]
                },
                { label: "Attended Hours:", name: "AttendedHours" },
                { label: "Credit Hours 1:", name: "AttendedHoursOne" },
                { label: "Credit Hours 2:", name: "AttendedHoursTwo" },
                { label: "Credit Hours 3:", name: "AttendedHoursThree" },
            ],
            formOptions: {
                inline: {
                    onBlur: 'submit',
                    submit: 'allIfChanged'
                }
            }
        });

        // Activate an inline edit on click of a table cell
        $('#tblSeminarBookings').on('click', 'tbody td.editable', function (e) {
            bookingTableEditor.inline(this);
        });

        bookingTable = $('#tblSeminarBookings').DataTable({
            "searching": false,
            "paging": false,
            "order": [],
            "language": {
                "infoEmpty": 'No bookings found for this Seminar.',
                "processing": '<span style="font-size:larger;font-weight:bold">Fetching Bookings...</span><br /><br /><img src="/images/icon_wait.gif" />',
                "zeroRecords": '<span style="font-size:larger;font-weight:bold">No matching bookings found.</span>',
                "search": "Search: "
            },
            "processing": true,
            "select": {
                style: 'os',
                selector: 'td:first-child'
            },
            "keys": {
                columns: [5,6],
                keys: [9],
                editor: bookingTableEditor,
                editOnFocus: true
            },
            "columns": [
                {
                    "data": "IdBooking",
                },
                {
                    "data": "FkIdPerson",
                },
                {
                    "data": "AttendeeFName",
                },
                {
                    "data": "AttendeeMName",
                },
                {
                    "data": "AttendeeLName",
                },
                {
                    "data": "Attended",
                    "orderable": false,
                    "render": function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="editor-active">';
                        }
                        return data;
                    },
                    className: 'editable dt-body-center',
                },
                {
                    "data": "AttendedHours",
                    className: 'editable',
                },
                {
                    "data": "AttendedHoursOne",
                    className: 'editable',
                },
                {
                    "data": "AttendedHoursTwo",
                    className: 'editable',
                },
                {
                    "data": "AttendedHoursThree",
                    className: 'editable',
                },
            ],
            "rowCallback": function (row, data) {
                // Set the checked state of the checkbox in the table
                $('input.editor-active', row).prop('checked', data.Attended == 1);
            }
        });

Prior to attempting to add tabbing functionality I was able to correctly click (via mouse pointer) to the cells I wanted to edit. I have a feeling there is a problem with my keys binding -- i forcibly set it to columns 5,6, but I have also tried using classes (editable) and other ways.

colin

Hi @jbtax ,

I tried it here, and it seems to be behaving as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

jbtax

Hello Colin,

Thank you for pointing me in the right direction. After comparing line by line what was different, I found that I had neglected to include the jquery.dataTables.js file. This caused nearly everything to work properly, except a missing function handler deep inside the main js.

It seems to be mostly working for display -- yay! Now to just wire up all the ajax calls to auto save when an edit is made.

Thanks,
Joe