Using hidden row datatable on server side call, and click not being registered,

sjwhyte

I was following the example http://datatables.net/release-datatables/examples/server_side/row_details.html to have the datatable to fetch the table data from an sAjaxSource, but it seems that the table is not rendered before the click event is set. Do you see anything that I could be doing wrong to get this to work?

[code]





Mac Address
Company
Device Desc
User









var devices;


function fnFormatDetails ( nTr )
{
var aData = devices.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[2]+' '+aData[5]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}

$(document).ready(function() {
devices = $('#deviceList').dataTable( {
"bServerSide": true,
"bProcessing": true,
"sAjaxSource":"/vision/device/ajaxList",
"sAjaxDataProp":"devices",
"aaSorting": [[0,"asc"]],
"bFilter":false,
"bLengthChange":false,
"iDisplayLength":10,
"bSort":true,
"sScrollY": "200",
"bAutoWidth": false,
"sContentPadding": "mmm",
"sPaginationType":"full_numbers",
"aoColumns": [
{"mData":"expand","bSortable":false,"sClass":"center"},
{"mData":"id","bVisible":false,"sClass":"center"},
{"mData":"macAddress"},
{"mData":"organization"},
{"mData":"deviceDescription"},
{"mData":"user"}
]});

devices.$('tr').find('img').on('click', function () {
var nTr = $(this).parents('tr')[0];
if ( devices.fnIsOpen(nTr) )
{
this.src = "images/toggle-expand.png";
devices.fnClose( nTr );
}
else
{
this.src = "images/toggle.png";
devices.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
});

});


[/code]

Thanks
Steve

sjwhyte

Sorry found the solution from a previous post. Changed line 57 above from

[code]
devices.$('tr').find('img').on('click', function () {
[/code]

to

[code]
$('#deviceList tbody').on('click', 'td img', function () {
[/code]