oSettings is null when re-creating DataTable
oSettings is null when re-creating DataTable
Hi,
I've created a DataTable inside a popup frame, both header and data contents are loaded with ajax+JSON.
The rows within my DataTable will expand showing details when clicking on any row.
The Problem does not occur the first time the popup shows but any attempts to click on the rows to show details after the popup is reopened will result in "TypeError: oSettings is null".
Its not that straight forward to create a small working example for this problem but I've pasted the full methods I use here below.
The function invokeHawkAgent is invoked when the popup is displayed and it calls the function fnFormatDetails where the exception is thrown when trying to do eData = eTable.fnGetData( nTr );
Any ideas how to solve this problem?
Many Thanks!!
[code]
function invokeHawkAgent(host,microAgentName,method,minAgents){
var anOpen = [];
var tabContents =''+method+' Loading...';
var url = 'invokeHawkAgent?HOST='+host+'&HAWKMETHOD='+method+'&MINAGENTS='+minAgents+'&MICROAGENTNAME='+microAgentName;
var pupupWidth = $(window).width() - (~~($(window).width() / 9));
var pupupHeight = $(window).height() - (~~($(window).height() / 9));
$("div.content").css("width", pupupWidth);
$("div.content").css("height", pupupHeight);
$('#tabs').html(tabContents);
var tTable;
$.ajax( {
"url": url,
"success": function ( json ) {
json.bDestroy = true;
tTable = $('#tabs-1-contents').dataTable({
"aaData": json.aaData,
"aoColumns": json.aoColumns,
"sScrollX": "100%",
"sScrollXInner": "510%",
"bScrollCollapse": true,
"sScrollY": "500px",
"bPaginate": true,
"bJQueryUI": true,
"bProcessing": true,
//"bAutoWidth": true,
//"aaSorting": [ ],
"bRetreive": true,
"bDestroy": false,
"sPaginationType": "full_numbers",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td', nRow).attr('nowrap','nowrap');
$('#loading').remove();
return nRow;
}
});
},
"dataType": "json"
} );
$('#tabs-1-contents td').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );
if ( i === -1 ) {
var nDetailsRow = tTable.fnOpen( nTr, fnFormatDetails(tTable, nTr,false), 'details' );
$('div.innerDetails', nDetailsRow).slideDown(2500);
anOpen.push( nTr );
}
else {
$('div.innerDetails', $(nTr).next()[0]).slideUp( 500,function () {
tTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}
tTable.fnDraw();
} );
$(function(){
$('#tabs').hide();
$("#tabs").tabs({
show: function(event, ui) {
var lastOpenedPanel = $(this).data("lastOpenedPanel");
if (!$(this).data("topPositionTab")) {
$(this).data("topPositionTab", $(ui.panel).position().top)
}
$(ui.panel).hide().css('z-index', 2).fadeIn(500, function() {
$(this).css('z-index', '');
if (lastOpenedPanel)
{
lastOpenedPanel
.toggleClass("ui-tabs-hide")
.hide();
}
});
$(this).data("lastOpenedPanel", $(ui.panel));
}
})
.children('ul')
.width(function(){
return $(this).children('li').length * ($(this).children('li').outerWidth()+15);
})
.wrap("")
.parent()
.css({'overflow-x':'scroll','overflow-y':'hidden','height':'60px','width':'100%'});
});
$('#popup').bPopup({
onOpen: function() {
$('#tabs').show();
},
content:'iframe',
contentContainer:'.content',
onClose: function() {
$( "#tabs" ).tabs( "destroy" );
$( "#tabs" ).empty();
}
});
}
[/code]
[code]
function fnFormatDetails( eTable, nTr,appendHawkMethodsToMenu )
{
var eData
try{
eData = eTable.fnGetData( nTr ); // <---------------- PROBLEM OCCURS HERE
}catch(err){
alert(err);
}
var selectedRowElement = "";
var sOut =
''+
'';
$.each(eTable.fnSettings().aoColumns, function(c){
sOut +=''+eTable.fnSettings().aoColumns[c].sTitle+':'+eData[c]+'';
});
if(appendHawkMethodsToMenu){
sOut+='GetMemoryUsage';
}
sOut+='';
sOut+='';
return sOut;
}
[/code]
I've created a DataTable inside a popup frame, both header and data contents are loaded with ajax+JSON.
The rows within my DataTable will expand showing details when clicking on any row.
The Problem does not occur the first time the popup shows but any attempts to click on the rows to show details after the popup is reopened will result in "TypeError: oSettings is null".
Its not that straight forward to create a small working example for this problem but I've pasted the full methods I use here below.
The function invokeHawkAgent is invoked when the popup is displayed and it calls the function fnFormatDetails where the exception is thrown when trying to do eData = eTable.fnGetData( nTr );
Any ideas how to solve this problem?
Many Thanks!!
[code]
function invokeHawkAgent(host,microAgentName,method,minAgents){
var anOpen = [];
var tabContents =''+method+' Loading...';
var url = 'invokeHawkAgent?HOST='+host+'&HAWKMETHOD='+method+'&MINAGENTS='+minAgents+'&MICROAGENTNAME='+microAgentName;
var pupupWidth = $(window).width() - (~~($(window).width() / 9));
var pupupHeight = $(window).height() - (~~($(window).height() / 9));
$("div.content").css("width", pupupWidth);
$("div.content").css("height", pupupHeight);
$('#tabs').html(tabContents);
var tTable;
$.ajax( {
"url": url,
"success": function ( json ) {
json.bDestroy = true;
tTable = $('#tabs-1-contents').dataTable({
"aaData": json.aaData,
"aoColumns": json.aoColumns,
"sScrollX": "100%",
"sScrollXInner": "510%",
"bScrollCollapse": true,
"sScrollY": "500px",
"bPaginate": true,
"bJQueryUI": true,
"bProcessing": true,
//"bAutoWidth": true,
//"aaSorting": [ ],
"bRetreive": true,
"bDestroy": false,
"sPaginationType": "full_numbers",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td', nRow).attr('nowrap','nowrap');
$('#loading').remove();
return nRow;
}
});
},
"dataType": "json"
} );
$('#tabs-1-contents td').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );
if ( i === -1 ) {
var nDetailsRow = tTable.fnOpen( nTr, fnFormatDetails(tTable, nTr,false), 'details' );
$('div.innerDetails', nDetailsRow).slideDown(2500);
anOpen.push( nTr );
}
else {
$('div.innerDetails', $(nTr).next()[0]).slideUp( 500,function () {
tTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}
tTable.fnDraw();
} );
$(function(){
$('#tabs').hide();
$("#tabs").tabs({
show: function(event, ui) {
var lastOpenedPanel = $(this).data("lastOpenedPanel");
if (!$(this).data("topPositionTab")) {
$(this).data("topPositionTab", $(ui.panel).position().top)
}
$(ui.panel).hide().css('z-index', 2).fadeIn(500, function() {
$(this).css('z-index', '');
if (lastOpenedPanel)
{
lastOpenedPanel
.toggleClass("ui-tabs-hide")
.hide();
}
});
$(this).data("lastOpenedPanel", $(ui.panel));
}
})
.children('ul')
.width(function(){
return $(this).children('li').length * ($(this).children('li').outerWidth()+15);
})
.wrap("")
.parent()
.css({'overflow-x':'scroll','overflow-y':'hidden','height':'60px','width':'100%'});
});
$('#popup').bPopup({
onOpen: function() {
$('#tabs').show();
},
content:'iframe',
contentContainer:'.content',
onClose: function() {
$( "#tabs" ).tabs( "destroy" );
$( "#tabs" ).empty();
}
});
}
[/code]
[code]
function fnFormatDetails( eTable, nTr,appendHawkMethodsToMenu )
{
var eData
try{
eData = eTable.fnGetData( nTr ); // <---------------- PROBLEM OCCURS HERE
}catch(err){
alert(err);
}
var selectedRowElement = "";
var sOut =
''+
'';
$.each(eTable.fnSettings().aoColumns, function(c){
sOut +=''+eTable.fnSettings().aoColumns[c].sTitle+':'+eData[c]+'';
});
if(appendHawkMethodsToMenu){
sOut+='GetMemoryUsage';
}
sOut+='';
sOut+='';
return sOut;
}
[/code]
This discussion has been closed.