Use of fnDrawCallback or .live()

smartalco

I'm using DataTables with expandable row details that are pulled from the server using AJAX. I have a separate JS function, changeTC(), that has an event trigger in it that operates on elements that are returned by the AJAX request. I'm positive the function itself works because I can open row details then use the javascript console to call changeTC() and it then functions as it should.

My problem is that I can't figure out a way to get changeTC() to actually get called and work. I've tried both making it a part of $(document).ready() and using .live('click' function() { (*stuff*) } as well as calling changeTC() from fnDrawCallback. Neither method seems to actually accomplish anything.

This seems to be exactly what fnDrawCallback was meant for but it isn't working. Code is as follows. (The various changeTC() calls are my attempts at getting the stupid function to work).

[code]
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
$kuj.ajax({
type: "POST",
url: "/~techlist/return_details.php",
cache: false,
data: 'id='+aData[1],
success: function(msg) {
oTable.fnOpen( nTr, msg, 'details' );
}
});

return "";
}

function changeTC() {

$kuj(".tcs_list").change(function() {

var record = $kuj(this).attr("id");
var num = $kuj("#" + record + " option:selected").attr("value");
//alert(record + " " + num + " " + what);
$kuj("." + record).each(function() {
bool = $kuj(this).hasClass('hidden');
if (!$kuj(this).hasClass('hidden')) {
$kuj(this).addClass('hidden');
}

if ($kuj(this).attr("id") == num) {
$kuj(this).removeClass('hidden');
}
});

});

}

$kuj(document).ready(function() {

//-- Return record details stuff until next comment
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

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

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

var oTable = $kuj('#records').dataTable({
"fnDrawCallback": changeTC(),
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"bProcessing": true,
"bAutoWidth": false,
"aoColumnDefs": [
{"bVisible":false, "aTargets":[5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33]},
{"bVisible":true, "bSearchable": false, "bSortable": false, "sWidth":"26px", "aTargets":[0]},
{"bSearchable": false, "bVisible": false, "aTargets":[1]},
{"bVisible":true, "sWidth":"350px", "aTargets":[2]},
{"bVisible":true, "sWidth":"220px", "aTargets":[3]},
{"bVisible":true, "aTargets":[4]}
],
"aaSorting": [[1, 'asc']]
});

$kuj('#records tbody td img').live( 'click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "ssi/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "ssi/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
changeTC();
});

//This is changeTC() internalized to document.ready and using .live()
$kuj(".tcs_list", $kuj("#records")).live('click', function() {

var record = $kuj(this).attr("id");
var num = $kuj("#" + record + " option:selected").attr("value");
alert(record + " " + num + " " + what);
$kuj("." + record).each(function() {
bool = $kuj(this).hasClass('hidden');
if (!$kuj(this).hasClass('hidden')) {
$kuj(this).addClass('hidden');
}

if ($kuj(this).attr("id") == num) {
$kuj(this).removeClass('hidden');
}
});

});

});[/code]