TypeError: f[b] is not a function when clicking Update, New, Delete button

VictorPearson

The table renders and displays the data yet, when trying to edit, delete, or add a new record, I get error:
TypeError: f[b] is not a function

Here is the debug:
http://debug.datatables.net/alujin

Here is the code:

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function () {

       editor = new $.fn.dataTable.Editor({
            ajax: "/api/StudentImmigrationNotesDT",
            model: "StudentImmigrationNotesModel",
            table: "#ImmigrationNotes",
            fields: [{
                    label: "Advised Date:",
                    name: "imnAdvisingDate",
                    type: "datetime"
            }, {
                    label: "Action Given:",
                    name: "imnAdvisingAction",
            }, {
                    label: "Advise Type:",
                    name: "imnAdvisingType",
           }, {
                    label: "Note:",
                    name: "imnAdvisingNote",
            }, {
                label: "Source:",
                name: "imnAdvisingSource",
           }, {
               label: "School ID:",
               name: "imnSchoolMasterID",
            }, {
                label: "Student ID:",
                name: "imnStudentUserID",
           }, {
               label: "Advise ID:",
               name: "imnImmigrationNoteID",
           }
            ]
        });

        // setup and establish the DataTable
        $("#ImmigrationNotes").DataTable({
            ajax: "/api/StudentImmigrationNotesDT",
            model: "StudentImmigrationNotesModel",
            // the columns used
            //data: data,
            columns: [
                { data: 'Advised Date' },
                { data: 'Action Given' },
                { data: 'Advise Type' },
                { data: 'Advise Note' },
                { data: 'Advise Source' },
                { data: 'School ID' },
                { data: 'Student ID' },
                { data: 'Advise ID' }
            ],
            // this sets the feedback text
            "oLanguage": {
                //"sUrl": "media/language/de_DE.txt",
                "sZeroRecords": "No records match your search criterion.",
                "sLengthMenu": "Display _MENU_ records per page.",
                "sInfo": "Displaying _START_ to _END_ of _TOTAL_ records.",
                "sInfoEmpty": "Showing 0 to 0 of 0 records.",
                "sInfoFiltered": "(Filtered from _MAX_ total records.)"
            },
            // this is for the copy, export to Excel, Print and PDF
            //dom: '<"top"fil<"toolbar">p>rt<"bottom"Bil>',
            dom: '<"top"r<"toolbar">fl>rt<"bottom"Bpi>',
            buttons: [
                {
                    extend: 'copyHtml5',
                    //ButtonText: 'Copy Page',
                    exportOptions: {
                        rows: ':visible',
                        columns: ':visible'
                    },
                },
                {
                    extend: 'csvHtml5',
                    //ButtonText: "Export to CSV",
                    exportOptions: {
                        rows: ':visible',
                        columns: ':visible'
                    },

                },
                {
                    extend: 'excelHtml5',
                    //ButtonText: "Export to CSV",
                    exportOptions: {
                        rows: ':visible',
                        columns: ':visible'
                    },
                },
                {
                    extend: 'pdfHtml5',
                    //ButtonText: "PDF",
                    exportOptions: {
                        rows: ':visible',
                        columns: ':visible'
                    },
                },
                {
                    extend: 'print',
                    //ButtonText: "Print",
                    exportOptions: {
                        rows: ':visible',
                        columns: ':visible'
                    },
                },
                //'selectedSingle',
                'selectAll',
                'selectNone',
                //'selectRows',
                //'selectColumns',
                //'selectCells',

                //// this hides or shows columns
                //{
                //    extend: 'collection',
                //    text: 'Toggle Visibility',
                //    buttons: [
                //        {
                //            text: 'Recalled',
                //            action: function (e, dt, node, config) {
                //                dt.column(6).visible(!dt.column(6).visible());
                //            }
                //        },
                //        {
                //            text: 'Action',
                //            action: function (e, dt, node, config) {
                //                dt.column(7).visible(!dt.column(7).visible());
                //            }
                //        }
                //    ]
                //},

                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }

            ],

            // default settings
            keys: false, // single cell select if true
            info: true,
            sort: true,
            searching: true,
            select: true,
            ordering: true,
            order: [[0, 'desc']],
            scrollY: '50vh',
            scrollX: true,
            scrollCollapse: true,
            bJQueryUI: true,
            sPaginationType: "full_numbers",
            displayStart: 0,
            stateSave: true,
            autoWidth: true,
            paging: true,
            fixedHeader: true,
            fixedColumns: false,
            columnReorder: true,
            serverSide: false,
            processing: true,
            deferRender: true,
            responsive: true,

            //columnDefs: [
            //             { width: '20%', targets: 0 }
            //            ],
            lengthMenu: [[1, 5, 10, 25, 50, 100, -1], [1, 5, 10, 25, 50, 100, "All"]],
            iCookieDuration: 60 * 60 * 24, // 1 day keep cookie
        });

allan

Can you link to the page showing the issue so I can help to debug it please? There isn't anything immediately wrong with the code that I can see (although neither DataTables nor Editor have a client-side model option - that will just be ignored).

Thanks,
Allan

VictorPearson

It's on my local dev box. Here though is more detail from the error from Chrome and FireFox Developer:

kthorngren

A google search seems to indicate the problem is with Bootstrap. Here is one example:
https://github.com/ashleydw/lightbox/issues/213

Have you looked into any issues with Bootstrap you may be running into?

Kevin

VictorPearson

jQuery v3.2.1
and
Bootstrap v3.3.7
is what's loaded.

kthorngren

As Allan asked - Are you able to post a link to your page or a test case to allow for troubleshooting the issue?

I would also check to make sure you are loading your CSS and JS includes in the correct order and that they are only being loaded once.

Kevin

VictorPearson

The site is only on my dev box.

What I did finally figure out is that I had not included bootstrap to Editor... I did editor.jqueryui.js instead thus, the error.

Once I added editor.bootstrap.js, all worked! I feel stupid.

Thank you all greatly for your help and patience!

allan

Thanks for posting back - great to hear you've got it working now. I'll add a try/catch with an error message explicitly stating if a display plug-in cannot be found.

Allan

VictorPearson

That will be a great help, Allan!

allan

Its in now and it will be in Editor 1.7.1. Not sure when I'll release that, probably towards the end of January.

Regards,
Allan

VictorPearson