Using fnDrawCallback to create multiple links on same row

jonk

Hi all, first would like to thank Allan and contributors to this forum, DataTables is sweet! I have created a server-side implementation with Zend and would like to make a couple of action calls from the same row. I found the example using fnDrawCallback http://datatables.net/usage/callbacks. The problem for me is that I am trying to create multiple links on one row, each with a separate action, the following is what I was trying to do:

[code]$('td:eq(0)', nRow).html( 'approve / reject' );


$('#fid_'+aData[0]).click(function(){
alert('approve');
});
$('#fid_r_'+aData[0]).click(function(){
alert('reject');
}); [/code]

The click events I am trying to add are not happening. I tried adding alerting the length of the ids for the links and I get 0. Is there something wrong with how I am referencing them? Any help is appreciated. Thanks! Jon

jonk

OK, I am going to answer my own question. :)
This works:
[code]$('td:eq(0)', nRow).html( 'approve / reject' );
$('#fid_'+aData[0]).live("click", function() { alert('approve'); } );
$('#fid_r_'+aData[0]).live("click", function() { alert('reject'); } ); [/code]

jonk

OK, so I got into testing this out and my logic failed. This is mostly blamed to my newbiness to jquery and not fully understanding .live(). Below I will past the "bad" code and then the "good" code.

Bad:
[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if( aData[1] == 'Unapproved' ){
$('td:eq(0)', nRow).html( 'approve / reject' );
$('#fid_'+aData[0]).live("click", function() {
createApproveModal( 'approve_modal', aData, function() {
$(".ui-widget-overlay").live("click", function() { $("#approve_modal").dialog("close"); } );
});
});
$('#fid_r_'+aData[0]).live("click", function() {
createRejectModal( 'reject_modal', aData, function() {
$(".ui-widget-overlay").live("click", function() { $("#reject_modal").dialog("close"); } );
});
});
} else if ( aData[1] == 'Approved' ){
$('td:eq(0)', nRow).html( 'reject' ).click( function(){
createRejectModal( 'reject_modal', aData, function() {
$(".ui-widget-overlay").live("click", function() { $("#reject_modal").dialog("close"); } );
});
});
} else if ( aData[1] == 'Rejected' ){
$('td:eq(0)', nRow).html( 'approve' ).click( function(){
createApproveModal( 'approve_modal', aData, function() {
$(".ui-widget-overlay").live("click", function() { $("#approve_modal").dialog("close"); } );
});
});
}
}

[/code]

Good:
[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if( aData[1] == 'Unapproved' ){
$('td:eq(0)', nRow).html( 'approve / reject' );
} else if ( aData[1] == 'Approved' ){
$('td:eq(0)', nRow).html( 'reject' );
} else if ( aData[1] == 'Rejected' ){
$('td:eq(0)', nRow).html( 'approve' );
}
$('#fid_'+aData[0]).die("click").live("click", function() {
createApproveModal( 'approve_modal', aData, function() {
$(".ui-widget-overlay").live("click", function() { $("#approve_modal").dialog("close"); } );
});
});
$('#fid_r_'+aData[0]).die("click").live("click", function() {
createRejectModal( 'reject_modal', aData, function() {
$(".ui-widget-overlay").live("click", function() { $("#reject_modal").dialog("close"); } );
});
});
return nRow;
},

[/code]

The problem was occurring after a user selected either reject or approve from a record with "unapproved" status and then selected to reject. I was instantiating 2 bindings to the element so 2 modals were popping up, not the behavior I want! Anyway, the Good code works!

GregP

Hey Jonk,

Answering your own questions is always great. ;-) I'm not sure that INSIDE the RowCallback is the best place for live events, though, unless your table is only created once per page refresh, in which case it doesn't really matter. Generally people put .live() (or the even better counterpart, .delegate()) into the document ready function because they are usually written to be generically reusable.

Regardless, one thing I would consider doing though is using variables for your data. Right inside your callback:

[code]
var status = aData[1],
identity = aData[0],
$actionCol = $('td:eq(0)', nRow);
[/code]

Then your code becomes more readable:

[code]
if( status == "Unapproved' ) {
$actionCol.html( '

jonk

No, I appreciate it a ton. This project will turn out to big huge I am sure, so your comment is appreciated!

jonk

One question, if I put the .live() into the doc ready, how then does it know to create an instance for that particular review id? I could make a class, but then how does it know what to send the createApproveModal()?