Internet explorer slowness issue and js error

dannyy

Hi guys this has got to be the finest piece of work that I have seen, well done.

I have just an issue in Internet explorer where the filtering and sorting of columns is slow and also I get the following error which only occurs in internet explorer

_oSettings.nTable is null or not an object. What doies this actually mean?

Firefox it works fine

Many Thanks

Danny

allan

Hi Danny,

oSettings is normally a reference to the DataTables settings object in my code, but _oSettings is never used in DataTables itself. So I'm guessing you are using TableTools or FixedHeader? I've never seen this error - so I'm not sure what might be causing it. Perhaps you could post a link to a page showing the problem?

Regards,
Allan

dannyy

Hi Allan

Thanks for your response. The following is the js code in the page. Note that I have 2 tables that are being displayed on the one page. The following is part 1 of the code

[code]
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#approveNominations thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#approveNominations tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
oTable = $('#approveNominations').dataTable( {

"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
<?
$aoColumns [] = "{ \"bSortable\": false }"; //info
$aoColumns [] = "{ \"bVisible\": false }"; //achievement
$aoColumns [] = "{ \"bVisible\": false }"; //Criteria
(( int ) $displayReason == 1 ? $aoColumns [] = "{ \"bVisible\": false }" : ''); //reason
(( int ) $displayDescription == 1 ? $aoColumns [] = "{ \"bVisible\": false }" : ''); //description


(( int ) $offlineApprover == 1 ? $aoColumns [] = "{ \"bVisible\": false }" : $aoColumns [] = "{ \"bSortable\": false }"); //checkbox
$aoColumns [] = "{ \"asSorting\": [ \"asc\" ] }"; //id
$aoColumns [] = "{ \"asSorting\": [ \"asc\" ] }"; //nominee
$aoColumns [] = "{ \"asSorting\": [ \"asc\" ], \"sType\": \"date\", \"sWidth\": \"75px\" }"; //date
$aoColumns [] = "{ \"asSorting\": [ \"asc\" ] }"; //nominator
$aoColumns [] = "{ \"asSorting\": [ \"asc\" ] }"; //status


$aoColumns [] = "{ \"bSortable\": false }"; //points
(( int ) $nomination_details [display_top_ups] == 1 ? $aoColumns [] = "{ \"bSortable\": false }" : ''); //topups
(( int ) $nomination_details [displayPointsLevel] == 1 ? $aoColumns [] = "{ \"bSortable\": false }" : ''); //points level
(( int ) $displayPRB == 1 ? $aoColumns [] = "{ \"bSortable\": false }" : ''); //disgretionary points


(( int ) $isFlagNominations == 1 ? $aoColumns [] = "{ \"bSortable\": false }" : ''); //flag nominations
(( int ) $isSupportingDocument == 1 ? $aoColumns [] = "{ \"bSortable\": false }" : ''); //file
(( int ) $modifyNomination == 1 ? $aoColumns [] = "{ \"bSortable\": false }" : ''); //view
print implode ( ",", $aoColumns );
?>
]
});
$.fn.dataTableExt.FixedHeader( oTable );


/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "images/admin/jquery/details_open.gif";
oTable.fnClose( nTr );
}
else if ( this.src.match('details_open') )
{
/* Open this row */
this.src = "images/admin/jquery/details_close.gif";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
} );


[/code]

dannyy

and here is part 2

[code]
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#approveNominationsHistory thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#approveNominationsHistory tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
oTable2 = $('#approveNominationsHistory').dataTable( {

"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
<?

$aoColumns_history [] = "{ \"bSortable\": false }"; //info
$aoColumns_history [] = '{ "bVisible": false}'; //achievement
$aoColumns_history [] = "{ \"bVisible\": false }"; //Criteria
(( int ) $displayReason == 1 ? $aoColumns_history [] = "{ \"bVisible\": false }" : ''); //reason
(( int ) $displayDescription == 1 ? $aoColumns_history [] = "{ \"bVisible\": false }" : ''); //description
$aoColumns_history [] = "{ \"asSorting\": [ \"asc\" ] }"; //id
$aoColumns_history [] = "{ \"asSorting\": [ \"asc\" ] }"; //nominee
$aoColumns_history [] = "{ \"asSorting\": [ \"asc\" ] , \"sType\": \"date\", \"sWidth\": \"100px\" }"; //date
$aoColumns_history [] = "{ \"asSorting\": [ \"asc\" ] }"; //nominator
$aoColumns_history [] = "{ \"asSorting\": [ \"asc\" ] }"; //status
$aoColumns_history [] = "{ \"bSortable\": false }"; //points
(( int ) $nomination_details [display_top_ups] == 1 ? $aoColumns_history [] = "{ \"bSortable\": false }" : ''); //topups
(( int ) $nomination_details [displayPointsLevel] == 1 ? $aoColumns_history [] = "{ \"bSortable\": false }" : ''); //points level
(( int ) $displayPRB == 1 ? $aoColumns_history [] = "{ \"bSortable\": false }" : ''); //disgretionary points
(( int ) $isSupportingDocument == 1 ? $aoColumns_history [] = "{ \"bSortable\": false }" : ''); //file
(( int ) $isFlagNominations == 1 ? $aoColumns_history [] = "{ \"bSortable\": false }" : ''); //flag nominations
//$aoColumns_history [] = "{ \"bSortable\": false }"; //points
print implode ( ",", $aoColumns_history );
?>
]


});
$.fn.dataTableExt.FixedHeader( oTable2 );


/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('td img', oTable2.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "images/admin/jquery/details_open.gif";
oTable2.fnClose( nTr );
}
else if ( this.src.match('details_open') )
{
/* Open this row */
this.src = "images/admin/jquery/details_close.gif";
oTable2.fnOpen( nTr, fnFormatDetails_history(nTr), 'details' );
}
} );
} );
} );

var oTable;

/* Event handler function */
function fnOpenClose ( oSettings )
{
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "images/admin/jquery/details_open.gif";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}
else if ( this.src.match('details_open') )
{
/* Open this row */
this.src = "images/admin/jquery/details_close.gif";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}



[/code]

Thanks

dannyy

part 3

[code]
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;

var sOut = '';
sOut += 'Criteria:'+aData[2]+'';
sOut += 'Achievement:'+aData[1]+'';
<?=( int ) $displayReason == 1 ? "sOut += 'Reason:'+aData[3]+'';" : "";?>
<?=( int ) $displayDescription == 1 ? "sOut += 'Description:'+aData[4]+'';" : "";?>

sOut += '';

return sOut;
}

//Approve nominations history

var oTable2;


/* Formating function for row details */
function fnFormatDetails_history ( nTr )
{
var iIndex = oTable2.fnGetPosition( nTr );
var aData = oTable2.fnSettings().aoData[iIndex]._aData;

var sOut = '';
sOut += 'Criteria:'+aData[1]+'';
sOut += 'Project Summary:'+aData[2]+'';
sOut += 'Key Challenges:'+aData[3]+'';
sOut += 'Outcomes:'+aData[4]+'';
sOut += '';

return sOut;
}

/* Event handler function */
function fnOpenClose_history ( oSettings )
{
$('td img', oTable2.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "images/admin/jquery/details_open.gif";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}
else if ( this.src.match('details_open') )
{
/* Open this row */
this.src = "images/admin/jquery/details_close.gif";
oTable2.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}

[/code]

allan

Hi Danny,

Yikes - that's a lot of code :-). Any chance of a link so I can see the problem actually occur? Also I still don't see where _oSettings would be coming from.

Thanks,
Allan

dhrobbins

Not sure if this will contribute, but I experience the same issue in IE 6 ( I know, I know - upgrade!). The error I get is:

'oFeatures' is null or not an object on the line function _fnReDraw(oSettings){if(oSettings.oFeatures.bSort). oSettings is null in this case. I am perform a range filter and here are snippets of my code:

[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {

jQuery.fn.dataTableExt.iApiIndex = 1;

var bonusStartDate = Date.parse(document.getElementById('bonusStartDate').value);
var bonusEndDate = Date.parse(document.getElementById('bonusEndDate').value);

var currentGridDate = Date.parse(aData[2]);

if ( bonusStartDate == null && bonusEndDate == null )
{
return true;
}
else if ( bonusStartDate <= currentGridDate && bonusEndDate == null)
{
return true;
}
else if ( bonusEndDate >= currentGridDate && bonusStartDate == null)
{
return true;
}
else if (bonusStartDate <= currentGridDate && bonusEndDate >= currentGridDate)
{
return true;
}
return false;
}
);

$( document ).ready( function ()
var otherBonusTable = $('#otherBonusGridTable').dataTable({"bSort" : false});
$('#bonusStartDate').keyup(function(){otherBonusTable.fnDraw()});
$('#bonusEndDate').keyup(function(){otherBonusTable.fnDraw()});
})'

[/code]

I've set a breakpoint in the plug-in, and it appears that for the delete of the first character processed from the textbox, IE enters the plug-in for each row that is in html table, no issues, then fails with the error I've listed above. FireFox has worked successfully.

UPDATE:

I removed the binding of keyup from the textboxes and fire off the call to fnDraw from a button click and no issue. It appears that IE 6 is clobbering oSettings after the first run of the of the plug-in in response to the key down action. In other words, the plug-in fires as it should for the first key press, but there after the DOM or something is setting oSettings to false.

Hope this helps. For me, given the general awesomeness of DataTables I can make the uses live with a Refresh button. If I come up with more I post here to this discussion.

dhrobbins

@danny or allan - I you want to compare notes let me know here and I'll shoot you my email address. I'd be happy to contribute where I can, and if possible get rid of my refresh button for IE 6. Thanks guys.

allan

@dhrobbins - interesting issue... DataTables should work okay in IE6... I don't actually have a machine with IE6 to hand at the moment (really wish MS would let us Mac folk use the IE compatibility images in VMWare :-( ) - but I ran it a little while ago, and it seemed to do okay. Does this happen in IE6 for you even in the basic example: http://datatables.net/examples/basic_init/zero_config.html ? It would be great if we could narrow the field a bit.

Regards,
Allan