$(...).editable is not a function

diptigajjar

I'm using the serverside ajax datatable and one of my table columns is editable. When the website loaded first time, the editable column works fine. But If I refresh the datatable(page) then editable not working and throws the $(...).editable is not a function

Below is my datatable code,

 require(['core/first'], function () {

    require(['tool_datatables/init', 'jquery', 'bootstrap-editable'], function (dt, $) {

        const pagingLenthOptions = [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]];

        const ajaxCall = $('#wholedatatableServerSide').attr('ajax-call');
        const ctype = $('#wholedatatableServerSide').data('ctype');
        const editAccess = $('#wholedatatableServerSide').data('edit');
        const removeAccess = $('#wholedatatableServerSide').data('remove');
        const makemodel = $('#wholedatatableServerSide').data('makemodel');

        // --------------------------
        $serversieAjax = dt.init('#wholedatatableServerSide', {
            "order": [['0', "desc"]], // disable initial sort
            "lengthMenu": pagingLenthOptions,
            "pageLength": 10,

            "language": {
                "info": 'Showing _START_ to _END_ of _TOTAL_ entries',
                "search": 'Search',
                "lengthMenu": 'Show _MENU_ entries',
                "emptyTable": 'No data available,
                "paginate": {
                    "first": 'First',
                    "last": 'Last',
                    "next": 'Next',
                    "previous": 'Previous'
                },
            },

            "processing": true,
            "serverSide": true,
            "bSortClasses": false,

            columnDefs: [
                { targets: 'nosort', "sortable": false, 'orderable': false },
            ],

            ajax: {
                url: ajaxCall,
                type: 'POST',
                dataType: "JSON",
                data: function (data) {
                    data.ctype = ctype;
                    data.editAccess = editAccess;
                    data.removeAccess = removeAccess;
                    data.makemodel = makemodel;
                }
            },

            "fnDrawCallback": function () {
                $('th').each(function () {
                    if (($(this).hasClass('sorting')) || ($(this).hasClass('sorting_desc'))) {
                        $(this).attr({ title: 'Sort Ascending' });
                    } else {
                        $(this).attr({ title: 'Sort Descending' });
                    }
                });

                console.log("check editable");

                $("#wholedatatableServerSide a.model_editable").editable({ 
                    type: "select",
                    mode: "inline",
                    showbuttons: false,
                    source: [{ value: 1, text: "Yes" }, { value: 0, text: "No" }],
                });
            }
        });
    });
 });

My editable column has anchor tag with class name model_editable.

What makes the editable to work first time but not after page load?

FYI: I'm using the moodle

kthorngren

What makes the editable to work first time but not after page load?

Its hard to say without being able to debug the problem. You might need to change this selector. Do some debugging to see if this selector works after refreshing the page. If you need help with this then please post a link to your page or a test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin