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

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

diptigajjardiptigajjar Posts: 1Questions: 1Answers: 0

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


  • kthorngrenkthorngren Posts: 16,773Questions: 25Answers: 3,971

    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.


Sign In or Register to comment.