uncaught exception: Cannot extend unknown button type: create

ddobbins

Hello, when i use a ajax call in my datatable to get my data the extend buttons create, edit, remove my page throws an error "uncaught exception: Cannot extend unknown button type: create". i have tried implementing it using the bootstrap 3 example here but that doesn't work either. here is a link http://live.datatables.net/hagaqomo/1/edit?html,js,output

kthorngren

One problem with your test case is the file references are for local resources so they won't work in the http://live.datatables.net sandbox environment. However it does look like the order of the file is incorrect. For example you need to load "datatables.min.js" before loading "dataTables.buttons.min.js". Take a closer look at the example you you linked to see the order of the libraries loaded. Both in the JS and CSS tabs.

A good option is to use the Download builder to get the proper files and order based on your selection.

Kevin

ddobbins

Kevin,
i have reordered the css and js files but still no luck, i have changed my solution back to calling the ajax to get my data first then use that data to load the table. the add and delete buttons work but the when i hit the edit button the data is not loaded from the table. any ideas on how to resolve this?

kthorngren

Without seeing you code in action its hard to say what the problem is. Can you post a link to your page or a test case showing the issue?

Kevin

ddobbins

```(function ($) {
var editor, table;

$(document).ready(function () {
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "../api/Mileage/GetSystemMileage",
        cache: false,
        success: function(tableData) {

        editor = new $.fn.dataTable.Editor({
        ajax: {
            create: {
                type: "POST",
                url: '../api/Mileage/AddThreshold/',
                data: {
                    Username: $("input[name=username]").val(),
                    Multiplier: $("input[name=multiplier]").val(),
                    Threshold: $("input[name=threshold]").val()
                }

            },
            edit: {
                type: "POST",
                url: '../api/Mileage/UpdateMileage/',
                data: {
                    Id: $("input[name=Id]").val(),
                    Username: $("input[name=username]").val(),
                    Multiplier: $("input[name=multiplier]").val(),
                    Threshold: $("input[name=threshold]").val()
                }

            },
            remove: {
                type: "POST",
                url: '../api/Mileage/DeleteThreshold/',
                data: {
                    Id: $("input[name=id]").val()
                }

            }
        },
        table: "#example",
        idSrc: 'Id',
        fields: [
            {
                label: "Id",
                name: "id",
                type:"hidden"
            },
            {
                label: "User Name",
                name: "username",
                type: "hidden",
                def:"ALL USERS"
            },
            {
                label: "Multiplier:",
                name: "multiplier"

            },
            {
                label: "Threshold:",
                name: "threshold"
            }]

    }).off('preSubmit').on('preSubmit', function(e, data, action) {
        $.each(data.data,
            function(key, values) {
                $.extend(data, data.data[key]);
            });
    });

    table = $("#example").DataTable({
        data: tableData.data,
        pagelength: 25,
        deferRender: false,
        order: [[3, 'asc']],
        columns: [
            {
                data: 'Id',
                name: 'id',
                visible:false

            },
            {
                data: 'Username',
                name: 'username',
                visible: false

            },
            {
                data: 'Multiplier',
                name: 'multiplier',
                render: $.fn.dataTable.render.number(',', '.', 2, '')
            },
            {
                data: 'Threshold',
                name: 'threshold',
                render: function (data) {
                    if (data === -1) {
                        return "Unlimited";
                    } else {
                        return data;
                    }

                }

            }],
         select: true

    });
        //// ReSharper disable once ConstructorCallNotUsed
        new $.fn.dataTable.Buttons(table,
            [
                {
                    extend: "create",
                    editor: editor,
                    formButtons: [
                        {
                            label: 'Cancel',
                            fn: function () { this.close(); }
                        },
                        'Add New'
                    ]
                },
                {
                    extend: "edit",
                    editor: editor,
                    formButtons: [
                        {
                            label: 'Cancel',
                            fn: function () { this.close(); }
                        },
                        'Update'
                    ]
                },
                {
                    extend: "remove",
                    editor: editor,
                    formButtons: [
                        {
                            label: 'Cancel',
                            fn: function () { this.close(); }
                        },
                        'Yes, Delete!'
                    ]
                }
            ]);

        table.buttons().container().appendTo($('.col-sm-6:eq(0)', table.table().container()));
        }
    });
});

})(jQuery);

here is my Javascript.

ddobbins

and here is what i am seeing when i select the first record to edit

kthorngren

The problem might be that your Editor and Datatables column configs don't match.

For Editor you have:

            {
                label: "Multiplier:",
                name: "multiplier"
 
            },

For DT you have:

            {
                data: 'Multiplier',
                name: 'multiplier',
                render: $.fn.dataTable.render.number(',', '.', 2, '')
            },

The name in Editor needs to match the data in Datatables. Its case sensitive so they both need to be either "multiplier" or "Multiplier".

Kevin

ddobbins

Kevin! you are the man!
thank you so much!