Editor is undefined

I2SUser

When attempting to use Editor I keep getting an error that editor is not defined, or that table tools are not defined. I have included all the appropriate JS and CSS files. I have been hitting my head against a wall with this error, was hoping someone could take a look at the code and see if I am missing anything with that I'm doing.

var editor;
 
 $(document).ready(function(){
  editor = new $.fn.dataTable.Editor( {
   ajax: "[AJAX]",
   table: "#table",
   fields: [{
     label: "Find Number",
     name: "0"
    },{
     label: "From Revision",
     name: "1"
    },{
     label: "Through Revision",
     name: "2"
    },{
     label: "Component Part Number",
     name: "3",
     type: "autoComplete",
     opts: {
      source: "[SOURCE]"
     }
    },{
     label: "Quantity",
     name: "4"
    },{
     label: "Reference Designator",
     name: "5"
    },{
     label: "Assembly Data Source",
     name: "6",
     type: "hidden",
     default: "#Local_DataSource#"
    },{
     label: "Assembly Part Number",
     name: "7",
     type: "hidden",
     default: "#Local_PartNumber#"
    }
   ]
  });

  var table = $('#table').dataTable({
   lengthChange: false,
   dom: 'Tlfrtip',
   columns: [
    {data: '0'},
    {data: '1'},
    {data: '2'},
    {data: '3'},
    {data: '4'},
    {data: '5'},
   ],
   
   LengthMenu:
    [[10, 25, 50, 100, -1],
     [10, 25, 50, 100, "All"]],
   
    aoColumnDefs: [
    {"aTargets": [0]},
    {"aTargets": [1]},
    {"aTargets": [2]},
    {"aTargets": [3]},
    {"aTargets": [4]},
    {"aTargets": [5]}
   ],
  });
  
   var tableTools = $.fn.dataTable.TableTools( table, {
    sRowSelect: 'os',
    aButtons: [
     { sExtends: "editor_create", editor: editor },
     { sExtends: "editor_edit",   editor: editor },
     { sExtends: "editor_remove", editor: editor }
    ]
   });
   
   $( tableTools.fnContainer() ).insertBefore( '#table_filter')
 });

allan

That all looks okay to me. I think the important part will be the load order of the Javascript. It should be:

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

Is that what you have got?

Allan

I2SUser

Allan,

Thanks for the quick reply below is the load order of my JS files.

• jQuery-2.1.0.min.js
• jquery-ui.min.js
• jquery.dataTables.min.js
• dataTables.jqueryui.js
• dataTables.tableTools.js
• dataTables.editor.js
• editor.jqueryui.js
• editor.autoComplete.js

Which is in the same order you suggested, with the additional jQueryUI elements loaded in. Tried re-ordering and loading only the four in the order you suggested with the 'extra' jQueryUI after, and still no change. I am getting Unable to get property 'bJUI' of undefined or null reference from dataTables.tableTools.js, Line: 715, Column: 2 and it is being called by the tableTools section. It appears to be when it tries to add the table tools to the Editor that it comes back undefined.

allan

Interesting - your load order looks okay. Are you able to e-mail me, or PM me, the URL so I can take a look and see what is going wrong?

Regards,
Allan

saidbenhaddi

Hi,
I came accross the same problem.
Did you find any solution/fix for this issue?

Regards,
Saïd

allan

@saidbenhaddi Can you link to the page so I can debug the issue please?

Allan

vmallder

Has this issue been solved? I am having the same problem but it has nothing to do with Editor.

I am loading datatables and table tools

DataTables-1.10.2/media/js/jquery.dataTables.min.js
DataTables-1.10.2/extensions/TableTools/js/dataTables.tableTools.min.js

Uncaught TypeError: Cannot read property 'bJUI' of undefined
TableTools @ dataTables.tableTools.min.js:21
(anonymous function) @ (index):838
m.Callbacks.j @ jquery.js:2
m.Callbacks.k.fireWith @ jquery.js:2
m.extend.ready @ jquery.js:2
J @ jquery.js:2

allan

Can you link to the page showing the issue please.

Allan