TypeError in Datatable.editor

icenhance

Dear all,
I have using Inline-editor and I got this error
TypeError: ttButtons[("editor_" + val)] is undefined

so please let me know what can i do?

allan

I suspect that is happening is that there is a loading order issue with the Javascript files. The order should be:

1. jQuery
2. DataTables
3. TableTools
4. Editor

I think 3 and 4 might be swapped in this case?

Allan

icenhance

Thanks Allan,

I'm using requireJs to loading this as bellow:

---------------------------------------------- main.js
require.config({
   paths: {
       "jquery": "libs/jquery/jquery.min",
       "underscore": "libs/underscore-amd/underscore-min",
       "backbone": "libs/backbone-amd/backbone-min",

       // Plug in Datatable
       "datatables": "libs/datatable/js/jquery.dataTables",
       "editables": "libs/datatable/js/dataTables.editor",
       "tabletools": "libs/datatable/js/dataTables.tableTools",

   }
});
------------------------------------------

And whenever i have swapped 3 before 4 or 4 before 3, i still get error.

This is code that I call your editor in my code:

----------------------------------------- Category List
editor = new $.fn.dataTable.Editor( {

                    sAjaxSource: "http://185.155.10.26/api/Categories?meta=true",
                    sAjaxDataProp: "Data",
                    processing: true,
                    serverSid: true,

                    table: "#example",
                    fields: [ {
                        label: "ID:",
                        name: "ID"
                    }, {
                        label: "UID:",
                        name: "UID"
                    }, {
                        label: "DepartmentID:",
                        name: "DepartmentID"
                    }, {
                        label: "DepartmentUID:",
                        name: "DepartmentUID"
                    }, {
                        label: "DepartmentName:",
                        name: "DepartmentName"
                    }, {
                        label: "CategoryName:",
                        name: "CategoryName"
                    }, {
                        label: "WebActive:",
                        name: "WebActive"
                    }, {
                        label: "IsPriority:",
                        name: "IsPriority"
                    }
                    ]
                } );


                var $window = $(window);

                var calcDataTableHeight = function() {
                    return Math.round($window.height() * 0.58);
                };

                var table = $('#example').dataTable({

                    aLengthMenu: [[20, 50, 100, 200, -1], [20, 50, 100, 200, "All"]],
                    iDisplayLength: 20,

                    sScrollY: calcDataTableHeight() + 50,
                    bPaginate: true,
                    bScrollCollapse: true,

                    processing: true,
                    serverSid: true,
                    sAjaxSource: "http://185.155.10.26/api/Categories?meta=true",
                    sAjaxDataProp: "Data",
                    order: [[ 5, "asc" ]],
                    columns: [

                        {"data": "ID"},
                        {"data": "UID"},
                        {"data": "DepartmentID"},
                        {"data": "DepartmentUID"},
                        {"data": "DepartmentName"},
                        {"data": "CategoryName"},
                        {"data": "WebActive"},
                        {"data": "IsPriority"}
                    ],

                    tableTools: {
                        sRowSelect: "os"

                    },

                    "aoColumnDefs": [
                        { "bVisible": false, "aTargets": [ 0, 1, 2, 3 ] },
                        { "sTitle": "Department", "sClass": "left", "aTargets": [ 4 ] },
                        { "sTitle": "Category", "sClass": "left", "aTargets": [ 5 ] },
                        { "sTitle": "Show in Website", "sClass": "center", "aTargets": [ 6 ], "sWidth": "100px",

                            "mRender" : function(obj, val)
                            {
                                if(obj === 1 )
                                    return 'Allowed';
                                else
                                    return 'Denied';
                            }
                        },
                        { "sTitle": "Show in Menu", "sClass": "center", "aTargets": [ 7 ], "sWidth": "100px",

                            "mRender" : function(obj, val)
                            {
                                if(obj === "1" )
                                return 'Allowed';
                                else
                                return 'Denied';
                            }
                        }
                    ]

                });

                $window.resize(function() {
                    var oSettings = table.fnSettings();
                    oSettings.oScroll.sY = calcDataTableHeight(); // <- updated!

                    // maybe you need to redraw the table (not sure about this)
                    table.fnDraw(false);
                });

---

allan

I suspect I'm missing something here - if TableTools is loaded after Editor, then the TableTools buttons that Editor adds are not added. But you aren't using the buttons in the above code, so I'm not sure what is triggering the error. Can you link me to the page so I can take a look?

A couple of other points:

• There is no sAjaxSource or sAjaxDataProp or some of the other properties you've used for Editor. You want ajax.
• serverSid should be serverSide in DataTables
• sAjaxSource in DataTables - I'd suggest you use ajax and ajax.dataSrc - the latter to replace sAjaxDataProp.

Allan

icenhance

Hi Allan,

Please check out this link you will see my error: https://github.com/chinda/iceweb

allan

Does it need to be built after download or something? I just load the html file and get a bunch of XHR errors.

Allan

icenhance

OK, please go to:

http://114.134.189.246:9090/web/app/#categoryList

allan

The server is taking an absolute age to respond to the request. That's not something that DataTables can do much about, but rather something that needs to be modified in the script.

In fact it looks like it just timed out for me.

Allan