Inline editing onBlur submit fails after table ajax reload.

stuartsjb-icr

I am using the following event handler (with KeyTable) to submit cell data when a user presses the tab key to change the selected editable table cell:

// Inline editing on tab focus
            courseworkMarksTable.on('key-focus', function (e, datatable, cell) {
                courseworkMarksTableEditor.inline(cell.index(), {
                    onBlur: 'submit'
                });
            });

I have noticed that after performing a table ajax reload (or indeed destroying and reinitialising the table) that this no longer works, and pressing tab instead seems to highlight cells in the first column, instead of moving between editable cells.

My full table initialisation function is below:

function drawCourseworkMarksTable() {

    if (typeof courseworkMarksTable !== 'undefined') {
        courseworkMarksTable.ajax.reload();
    } 
    
    else {

        $(document).ready(function () {

            // DataTable Editor Initialisation
            courseworkMarksTableEditor = new $.fn.dataTable.Editor({
                "ajax": "includes/GetCourseworkMarks.php",
                table: "#CourseworkMarksTable",
                fields: [
                    {
                        label: "Marker A",
                        name: "ModuleCourseworkMarks.MarkerA"
                    }, {
                        label: "Marker B",
                        name: "ModuleCourseworkMarks.MarkerB"
                    },
                    {
                        label: "Mark A",
                        name: "ModuleCourseworkMarks.MarkA"
                    },
                    {
                        label: "Mark B",
                        name: "ModuleCourseworkMarks.MarkB"
                    },
                    {
                        label: "Deadline",
                        name: "ModuleCourseworkMarks.Deadline",
                        type: "date",
                        "dateFormat": "dd/mm/yy"
                    },
                    {
                        label: "EC Submission",
                        name: "ModuleCourseworkMarks.ECopySubmission",
                        type: "date",
                        "dateFormat": "dd/mm/yy"
                    },
                    {
                        label: "HC Submission",
                        name: "ModuleCourseworkMarks.HardCopySubmission",
                        type: "date",
                        "dateFormat": "dd/mm/yy"
                    },
                    {
                        label: "Word Count",
                        name: "ModuleCourseworkMarks.WordCount"
                    },
                    {
                        label: "Academic Year ID",
                        name: "ModuleCourseworkMarks.AcademicYearID",
                        def: academicYearID,
                        type: "hidden"
                    },
                    {
                        label: "Module ID",
                        name: "ModuleCourseworkMarks.ModuleID",
                        def: moduleID,
                        type: "hidden"
                    }
                ]
            });

            // Inline editing on click
            $('#CourseworkMarksTable').on('click', 'tbody td:not(:first-child)', function (e) {
                courseworkMarksTableEditor.inline(this, {
                    onBlur: 'submit'
                });
            });

            // Disable Key Navigation when Editor popup window is opened
            courseworkMarksTableEditor.on('open', function (e, type) {
                if (type == "main") {
                    courseworkMarksTable.keys.disable();
                }
            })
                    // Enable Key Navigation when Editor popup window is closed
                    .on('close', function (e, type) {
                        courseworkMarksTable.keys.enable();
                    });


            // DataTable Initialisation
            courseworkMarksTable = $('#CourseworkMarksTable').DataTable({
                "ajax": {
                    url: "includes/GetCourseworkMarks.php",
                    data: function (d) {
                                d.moduleID = newModuleID,
                                d.academicYearID = courseworkMarksAcademicYearID;
                    },
                    type: 'POST'
                },
                keys: {
                    columns: [3, 4, 5, 6, 7, 8, 9, 10]
                },
                responsive: true,
                select: {
                    style: 'os',
                    blurable: true
                },
                "dom": "ifrtB",
                "iDisplayLength": -1,
                scrollY: documentHeight / 3 + "px",
                buttons: [
                    {extend: 'edit', editor: courseworkMarksTableEditor},
                    'copyHtml5',
                    {extend: 'csvHtml5',
                        text: 'Export CSV', exportOptions: {
                            columns: ':visible'
                        }
                    }
                ],
                "drawCallback": function (settings) {
                    if (document.getElementById("CourseworkMarksAcademicYearSelect").disabled == true) {
                        document.getElementById("CourseworkMarksAcademicYearSelect").disabled = false;
                    }

                },
                "columns": [
                    {data: "Student.Surname"},
                    {data: "Student.Forename"},
                    {data: "Student.AnonymousID"},
                    {data: "ModuleCourseworkMarks.MarkerA"},
                    {data: "ModuleCourseworkMarks.MarkA"},
                    {data: "ModuleCourseworkMarks.MarkerB"},
                    {data: "ModuleCourseworkMarks.MarkB"},
                    {data: "ModuleCourseworkMarks.Deadline"},
                    {data: "ModuleCourseworkMarks.ECopySubmission"},
                    {data: "ModuleCourseworkMarks.HardCopySubmission"},
                    {data: "ModuleCourseworkMarks.WordCount"},
                    {data: "ModuleCourseworkMarks.ModuleCourseworkMarkID", class: "never"}
                ],
                "order": [[0, "asc"]]
            });

            // Inline editing on tab focus
            courseworkMarksTable.on('key-focus', function (e, datatable, cell) {
                courseworkMarksTableEditor.inline(cell.index(), {
                    onBlur: 'submit'
                });
            });
        });
    }
}

allan

Are you able to link to a page showing the issue so I can debug it please?

If I use $('#example').DataTable().ajax.reload(); on this example - KeyTable continues to operate as expected.

Allan

stuartsjb-icr

Hi Allan,

I'd love to provide you with an example, but unfortunately all our development operates on an intranet server and is unavailable from the internet.

I have rectified the problem at any rate: I use two tables on the same page that both use that event handler, and was previously destroying and reinitialising both tables to reflect variable changes (moduleID and academicYearID), instead of supplying the data to ajax as an object in a function. For some reason when the second table finished reinitialising it prevented Keytable from working in the first table (the one I've mentioned above). Anyway thanks for your time and this thread can be closed now.