"TypeError: oSettings is null" in var oSettings = _fnSettingsFromNode( this[DataTable.ext.iApiIndex

aukep

Hi all, being a newbie to datatables I'm having a problem.
My table is being opened and filled depending on which link one clicks. The first time there's no problem with opening/closing the rows to show detailed info. But after clicking the other link. opening/closing the rows doesn't function anymore.
Instead I'm getting an Exception : "TypeError: oSettings is null" in:

this.fnIsOpen = function( nTr )
{
var oSettings = _fnSettingsFromNode( this[DataTable.ext.iApiIndex] );
var aoOpenRows = oSettings.aoOpenRows;
......

Anyone any ideas how to solve this one?

kind regards Auke Poortman


This is my code:
[code]

var str="";
var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += 'Filesize:' + aData.filesize + '';
sOut += 'runbatchID:' + aData.runbatchID + '';
sOut += 'Starttijd verwerking:' + aData.starttijdBatch + '';
sOut += 'Eindtijd verwerking:' + aData.eindtijdBatch + '';
sOut += 'Duur verwerking:' + aData.eindtijdBatch + '';
sOut += '';

return sOut;
}

$(document).ready(function() {


oTable =$('#datatable').dataTable( {
"bProcessing": true,
"bStateSave": true,
"bServerSide": true,
"bFilter": false,
"bLengthChange": true,
"bRetrieve": true,
"aaSorting": [[ 1, "desc" ]],
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "env",
"value": "<?php print($_GET['env']); ?>" } );
aoData.push( { "name": "customer",
"value": $("#filter_customer").mcDropdown().getValue()[0] } );
aoData.push( { "name": "filename",
"value": document.getElementById('filter_filename').value } );
aoData.push( { "name": "filter_start",
"value": document.getElementById('filter_start').value } );
aoData.push( { "name": "filter_finish",
"value": document.getElementById('filter_finish').value } );
},
"sAjaxSource": "AJAX/datatables/Postbus_data.php",
"aoColumns": [
{ "mDataProp": "details_png", "bSortable": false },
{ "mDataProp": "date", "bSortable": true },
{ "mDataProp": "time", "bSortable": false },
{ "mDataProp": "customer", "bSortable": true },
{ "mDataProp": "filename", "bSortable": true },
{ "mDataProp": "filesize", "bSortable": true, "bVisible": false },
{ "mDataProp": "transferstatus", "bSortable": true },
{ "mDataProp": "runbatchID", "bSortable": true, "bVisible": false },
{ "mDataProp": "starttijdBatch", "bSortable": true, "bVisible": false },
{ "mDataProp": "eindtijdBatch", "bSortable": true, "bVisible": false },
{ "mDataProp": "batchstatus", "bSortable": true }
]
} );


$('#datatable tbody td img').live( 'click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr ) )
{
/* This row is already open - close it */
this.src = "css/images/datatables/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "css/images/datatables/details_close.png";

oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
});
} );

[/code]

aukep

Is there no one who can help me?!?! I'm really stuck with this one. It's such a beautiful feature.... :-S

ironman

I have the exact same issue, with almost identical code. I can't figure out why the oSettings is coming back as null.

allan

Can either of you link to a page showing the issue please. I don't immediately see what would cause an issue with the above code.

Allan

aukep

Hi Allan,

sorry, the site in which I'm using the datatables is a site used strictly within the walls of our company. But maybe I can give you some more info.
I've got 2 menu-items, each calling the same php-file but with different variables ('aat' or 'prod') .
This php builds up a part of the site in which you get some possibilities to choose AND building up a datatable (#datatable) with information. This information is collected within the file called "Postbus_data.php".
Within this datatable one gets the opportunity to click on a row to get some detailed info.
The first time there's no problem, the info is shown wonderfully. But after switching to the other menu-item the detailed-info functionality isn't working anymore giving me the error:
"TypeError: oSettings is null" when calling the funtion _fnSettingsFromNode( this[DataTable.ext.iApiIndex] );

It looks like the code has lost 'connection' to the object oTable

Hope this gives you some more clues......

Kind regards Auke

allan

> It looks like the code has lost 'connection' to the object oTable

That is almost certainly the problem, but I don't see anything in the above code that would cause that problem. I'm afraid we'd need to see the full page to be able to offer much help. At the moment I can only guess that there is an HTML rewrite of the #datatable element, a destroy is happening or you have more than one #datatable elements.

Allan

ironman

So, after a lot of digging and debugging, I found that in the _fnSettingsFromNode function after iterating through my datatables on the page, and seeing that what was in 'DataTable.settings[i].nTable' and what was in 'nTable' appeared to be identical, but upon further inspection because they are being compared with a triple equals (the right thing to do BTW) They were in fact different objects that had the exact same information in them. The object in 'nTable' was just hanging around in memory somewhere. So, I looked at how I was initiating my call to listen for the event and attach the handler and realized that it was using .live which is deprecated as of Jquery 1.7. So, I changed it to .on and changed how I was calling it, so it now became
[code]
$(document).on('click', '.myDataTableToggler', function () {
// ... code here
}
[/code]
instead of using the old .live like
[code]
$('.myDataTableToggler').live('click', function () {
// ... code here
}
[/code]

Also, when I put that into place they did equal each other in the _fnSettingsFromNode function but it still didn't work. I started thinking that if I were using .on, I probably needed to unbind when I refreshed the page, so I place a call to unbind it directly before I call the .on, which looks like
[code]
$(document).off('click', '.myDataTableToggler');
$(document).on('click', '.myDataTableToggler', function () {
// ... code here
}
[/code]

The last thing I did was to change the scope of my oTable variable, and I initialized it on document ready and then just write to it on my new datatable when I re-instantiate it for each page refresh.

I hope this helps

palmern22

ironman if I could upvote you I would!

aukep

Excuse me for reaction after such a long time but : Yes, yes, yes!!!! You're great it works like a charm. Thank Ironman!

rajibchowdhury

This piece of code really worked for me, you are great @ironman :)