Cannot extend unknown button type while using RequireJS with Combined Datatables.js and Editor.js

Cannot extend unknown button type while using RequireJS with Combined Datatables.js and Editor.js

NissimNissim Posts: 1Questions: 1Answers: 0

TLDR;

I get Uncaught Cannot extend unknown button type: selected when trying to use combined datatables file with a seperate editor.js file, all being managed by requirejs. I think it might be that requirejs is messing with adding the select extension. But i do not know how to fix this.

Problem:

I'm trying the trial version and i wanted to use the combined datatables js with the following included in it(copied from js file) with a seperate datatables.editor.js.

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs/dt-1.10.15/b-1.3.1/r-2.1.1/se-1.2.2
 *
 * Included libraries:
 *   DataTables 1.10.15, Buttons 1.3.1, Responsive 2.1.1, Select 1.2.2
 */

I'm tring a seperate editor file because I got error below when i tried to use the combined js file with editor in it

$.fn.dataTable.Editor is not a constructor

Here's my common.js for require.js

requirejs.config({
    baseUrl: "/",
    map: {
      '*': {
        'css': 'js/require-css.min', // or whatever the path to require-css is
        'datatables.net': 'datatables-new'
      }
    },
    paths: {
        'css': 'js/require-css.min',
        'jquery':"webjars/jquery/2.2.0/jquery.min",
        'datatables-new': "js/datatables-a.min",
        'datatables-editor': "vendor/editor-1.6.3/js/editor.bootstrap.min"
    },
    shim: {
        "datatables-editor": {
            deps: [ 'css!vendor/editor-1.6.3/css/editor.bootstrap.min',
                    "vendor/editor-1.6.3/js/dataTables.editor"
                ]
        },
        "datatables-new": {
            deps: [ 'css!/css/datatables-a.min',
                'jquery'
                ]
        }
    }
});

and here's my script

requirejs(['/js/common.js'], function (common) {
    $(document).ready(function() {
        require(['datatables-new','datatables-editor'], function(){
            $.fn.dataTable.render.ellipsis = function(cutoff) {
                return function(data, type, row) {
                    return type === 'display' && data.length > cutoff ? data.substr(0,
                            cutoff)
                            + '...' : data;
                }
            };
            
            editor = new $.fn.dataTable.Editor( {
                ajax: {
                    create: {
                        type: 'POST',
                        url:  '../php/rest/create.php'
                    },
                    edit: {
                        type: 'PUT',
                        url:  '../php/rest/edit.php?id=_id_'
                    },
                    remove: {
                        type: 'DELETE',
                        url:  '../php/rest/remove.php?id=_id_'
                    }
                },
                table: "#dishDataTables",
                fields: [ {
                        label: "Name",
                        name: "name"
                    }, {
                        label: "Price",
                        name: "price"
                    }, {
                        label: "Description",
                        name: "description"
                    }, {
                        label: "Category",
                        name: "category"
                    }, {
                        label: "Status",
                        name: "status"
                    }
                ]
            } );
            
            $('#dishDataTables').DataTable({
                paging : true,
                columnDefs : [ {
                    targets : [ 3 ],
                    render : $.fn.dataTable.render.ellipsis(25)
                } ],
                select: true,
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit",   editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });
        });
    });
});

The links to ../php/rest/create.php, ../php/rest/edit.php and ../php/rest/remove.php are dummies, they don't work, But i've put them there just to test ui of editor.

I know that Uncaught Cannot extend unknown button type: selected is because select is not being detected but i don't understand why this is happening as Select.js is inside the datatables.js.

If i remove this block from datables, everything works fine without buttons but i want the buttons.

                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit",   editor: editor },
                    { extend: "remove", editor: editor }
                ]

The key part in require.js is below. I've added alias for datatables.net as it was required by datatables-editor. But I also think it messes loading the extension.(extension is inside "js/datatables-a.min").

 map: {
      '*': {
        'datatables.net': 'datatables-new'
      }
    },
    paths: {
        'datatables-new': "js/datatables-a.min",
        'datatables-editor': "vendor/editor-1.6.3/js/editor.bootstrap.min"
    },

Any help is appreciated

This discussion has been closed.