DataTables Editor -- $(this.s.domTable).dataTable()._ is not a function

ghudeihed

Hi Allan,

I am trying to add editing functionality to my table but I am getting this error $(this.s.domTable).dataTable()._ is not a function.
I am using the same code in the examples but instead of using php I am using C#

[code]

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

$(document).ready(function () {
loadDataTableInfoUsingServerSideJS();
initDataTableEditor();
});

function initDataTableEditor() {
// Create the form
editor = new $.fn.dataTable.Editor({
"ajaxUrl": "myWbService.asmx",
"domTable": "#myDatatable",
"fields": [{
"label": "Browser:",
"name": "browser"
}, {
"label": "Rendering engine:",
"name": "engine"
}, {
"label": "Platform:",
"name": "platform"
}, {
"label": "Version:",
"name": "version"
}, {
"label": "CSS grade:",
"name": "grade"
}
]
});

// Edit record
$('#myDatatable').on('click', 'a.editor_edit', function (e) {
e.preventDefault();

editor.edit(
$(this).parents('tr')[0],
'Edit record',
{ "label": "Update", "fn": function () { editor.submit() } }
);
});
}
[/code]


Thanks,

allan

Can you give me a link to your page so I can see what is going on please?

Thanks,
Allan

ghudeihed

Hummmm... I am working locally here, but my dataTable works fine with no issues. when I click on Edit/Delete link that error show up in the console window

allan

The error suggests that DataTables can't get the data for the row that is being edited. However, given your use of $(this).parents('tr')[0] it looks like it should be okay to me. All I can really suggest is checking that is the TR element in the DataTable that you expect.

I'm afraid I would need to be able to see a test case to be able to offer any further assistance :-(.

Allan

ghudeihed

Wow that was fast, thanks a lot Allan. you are super.
I will try to recheck that, but how can I ensure that I am really passing the TR that I am selecting?

allan

Add something like:

[code]
console.log( $(this).parents('tr')[0] );
[/code]

just before you call the edit function. But it should be working as expected, so I'm not sure what has gone wrong there...

Allan

ghudeihed

I was able to move forward with this issue by following this post http://editor.datatables.net/tutorials/display_controllers
However, I got another error when I click on the green icon :D [oTable.fnIsOpen is not a function]

here is my full code body if you can help me with that work
And really really really thank you sooo much


[code]
var oTable;
var aSelected = [];
var oEditor = $.fn.dataTable.Editor;
var oEditorForm;
var oSelectedRow;

EditorInitController();

$(document).ready(function () {
CreateEditorForm();
DataTableInitPartsUser();
OpenCloseClickHandler();
ClickedRowSelector();
});

function DataTableInitPartsUser() {
oTable = $('#PartsUserTable').dataTable({
"bFilter": false, // TODO: set-up search textbox
"bJQueryUI": true,
"iDisplayLength": 10,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"aaSorting": [[0, "asc"]],
"sAjaxSource": "CustomWebService.asmx/GetPartsUserDataTable",
"oLanguage": {
"sInfo": "Showing _START_ to _END_ of _TOTAL_ parts",
"sProcessing": "Please wait...",
"sEmptyTable": "No part selected",
"sInfoEmpty": "Showing 0 to 0 of 0 parts"
},
"aoColumns": [
{ "sTitle": "manuf_pn" },
{ "sTitle": "sState" },
{ "sTitle": "sPriority" },
{ "sTitle": "sAssignee" },
{ "sTitle": "type_main" },
{ "sTitle": "type_sub" },
{ "sTitle": "datasheet", "bSortable": true },
{ "bVisible": 0}, /* ID column */
{
"sTitle": null,
"sClass": "open_close",
"bSortable": false,
"bSearchable": false,
"sDefaultContent": '',
}
],
"fnServerData": CallFnServerDataPartsUserDataTable
});
}

function EditorInitController()
{
oEditor.display.details = $.extend( true, {}, oEditor.models.displayController, {
"init": function ( dte ) {
// No initialisation needed - we will be using DataTables' API to display items
return oEditor.display.details;
},

"open": function ( dte, append, callback ) {
var table = $(dte.s.domTable).dataTable();

// Close any rows which are already open
oEditor.display.details.close( dte );

// Call fnOpen on the DataTable
table.fnOpen( dte.s.editRow, append, 'DTE_EditorDetails' );
table.fnUpdate( '', dte.s.editRow, 0 );

if ( callback ) {
callback();
}
},

"close": function ( dte, callback ) {
var table = $(dte.s.domTable).dataTable();
var openRows = table.fnSettings().aoOpenRows;

// Call fnClose on the DataTable
if ( openRows.length > 0 ) {
var openRow = openRows[0].nParent;

table.fnClose( openRow );
table.fnUpdate( '', openRow, 0 );
}

if ( callback ) {
callback();
}
}
} );
}

function CreateEditorForm() {
// Create the form
oEditorForm = new $.fn.dataTable.Editor({
"ajaxUrl": "CustomWebService.asmx/GetPartsUserDataTable",
"domTable": "#PartsUserTable",
"display": "details",
"fields": [
{
"label": "Part Number:",
"name": "manuf_pn"
},
{
"label": "State:",
"name": "sState"
},
{
"label": "Priority:",
"name": "sPriority"
},
{
"label": "Assignee:",
"name": "sAssignee"
},
{
"label": "Main Type:",
"name": "type_main"
},
{
"label": "Sub Type:",
"name": "type_sub"
},
{
"label": "Datasheet:",
"name": "datasheet"
}
]
});
}

function OpenCloseClickHandler() {
$('#PartsUserTable tbody').on('click', 'td.open_close', function () {
oSelectedRow = this.parentNode;
console.log( oSelectedRow );

if ( oTable.fnIsOpen( oSelectedRow ) ) {
oEditorForm.close();
}
else {
oEditorForm.edit(
oSelectedRow,
'Edit row',
[
{
"className": "delete",
"label": "Delete row",
"fn": function () {
// Close the edit display and delete the row immediately
oEditorForm.close();
oEditorForm.remove( oSelectedRow, '', null, false );
oEditorForm.submit();
}
}, {
"label": "Update row",
"fn": function () {
oEditorForm.submit();
}
}
]
);
}
} );
}

[/code]

allan

fnIsOpen is a new function in 1.9. Are you using the latest 1.9.1 (or even 1.9.0)? If you could run your table through the debugger ( http://debug.datatables.net ) that would be useful.

Allan

ghudeihed

Yes that was the issue, I was using 1.8 Thanks a lot Allan :)