Example not Running in Firefox and Chrome browsers

pchenna1

Thanks for the wonderful plugin.It eases working with tables .

I downloaded both v1.6.2 and v1.7 and tried to run examples in Chrome and Firefox browsers.I'm trying to run dataTables-1.6.2/dataTables-1.6/examples/data_sources/ajax.html and seeing that no table shows up.

When I checked the error logs in Chrome it says " Uncaught TypeError: Cannot read property 'aaData' of null",but the same is working in IE without any issues.And Firefox complains about styling elements and doesn't load up the tree.

Please suggest on this.Is there any browser specific versions available??.

Thanks

allan

My guess is that you are loading the file using file://{whatever}. I doubt that Ajax will work as expected for this, since it will need to open a file from the file system, rather than from a web-server. There might also be security considerations which mean these browsers block this.

If you load the example into a web-server then it will work fine, as shown here:
http://datatables.net/examples/data_sources/ajax.html

Allan

pchenna1

Thanks Allan for the quick response.Will try to deploy on to web-server and check this out.

pchenna1

I got the code deployed in Webserver and I see that Grid is coming up without any issues and all sorting,pagination working fine in all browsers.
But expand works only in Firefox but not the same in IE8 and Chrome browsers.
[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";

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

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

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": '../json/json2.txt',
"aoColumns": [
{ "bSortable": false },
null, null, null, null, null
],
"aaSorting": [[1, 'asc']]
});

$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
alert(this.parentNode.parentNode);
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../media/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../media/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
} );
[/code]

I modified the code to read from Ajax datasource- json2.txt.
Is there anything that I'm missing here specific to browsers.When I try to debug the code,I see that oTable.fnGetNodes() has 0 records.

Please suggest.

Thanks.

allan

Given that the loading of the data is asynchronous (typical Ajax), your "('td img', oTable.fnGetNodes() ).each( function () {" function is going to run before the data has loaded (sometimes...). I'd suggest you take a look at using fnInitComplete which fires once the loaded has completed and fnGetNodes will give you what is expected.

Allan

pchenna1

Thanks a lot Allan.Just works smoothly.
Your constant replies and feedback really encourages newbies like us to explore datatables and JQuery more and use it across.