how to use fnOpen with fnCreatedRow

rowel

I have a table. When users click on a row, what I would like to happen is a new row gets dynamically created underneath the clicked row.
Then inside this newly created row, I'm populating it with content pulled via Ajax. Then when users click on the 'parent' row again, the newly created row is hidden.

I got this working fine using static tables.

But had some difficulty when it came to implementing the same UI process with the dynamically created rows. What's happening is instead of a single click, I had to click the parent row twice before my "ajax" row shows up.

Here's my code
[code]
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
var oTable;
$(nRow).attr('id', aData[4]); // add ChurchID for this row
$(nRow).attr('class','churchrow'); // add class for this row
$(nRow).click( function(){
// alert("click added here for id " + aData[4] );
var oTable;
churchid = aData[4];
// 'open' an information row when a row is clicked
$('#' + churchid).click( function () {
if ( oTable.fnIsOpen(this) ) {
// oTable.fnClose( this ); // if you remove this code, churchinfo div remains in DOM, saving us from future AJAX calls
} else {
oTable.fnOpen( this, '', "class-detail-row" );
}
// load info via ajax
if (!$.trim($("#churchinfo-" + churchid).html())) {
$.get( "/_getchurch-info.asp?ID=" + churchid, function( data ) {
$( "#churchinfo-" + churchid ).html( data );
// alert("ajax " + churchid + " call made!");
}); // .get
}; // if
// infowindow remains open
$("#churchinfo-" + churchid ).slideDown(300); // this should really be slideToggle(300) once I get fnOpen working
});
oTable = $('#churchlist').dataTable();
});
}
[/code]

I think what's happening is on the 1st click of the parent row, that's when I assign the click handler to create the new row.
Then the next time time I click again the parent row, only then would the ajax row show up.

What I need to happen is get oTable.fnOpen working on the first click.

In the code above, I don't know what to put inside the parenthesis for fnOpen.... nRow, $(nRow), this ? I tried them all and it's not working.

Sorry, I'm new the jquery so the above code is full of alerts and comments for debugging.

rowel

I just want to add, I used fnCreatedRow callback because if I just use a simple $(#table tbody tr).click(), the click event only works for the first page.. if I move to the second page, or re-sort, the click event is not on the other records/rows.

rowel

[SOLVED] Got it... the solution to my problem is using get(0). -- found a related question on this board about fnOpen()

fnOpen( $('#9999').get(0), ....

I don't know what get(0) does, but everything is working great now.

[code]
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
var oTable;
$(nRow).attr('id', aData[4]); // add ChurchID for this row
$(nRow).attr('class','churchrow'); // add class for this row
$(nRow).click( function(){
var oTable = $('#churchlist').dataTable();
churchid = aData[4];
// 'open' an information row when parent row is clicked
if (oTable.fnIsOpen($('#' + churchid).get(0)) ) {
// oTable.fnClose( this ); // churchinfo div remains in DOM, saving us from future AJAX calls
} else {
oTable.fnOpen( $('#' + churchid).get(0), '', "class-detail-row" );
}
// load info via ajax
if (!$.trim($("#churchinfo-" + churchid).html())) {
$.get( "/_getchurch-info.asp?ID=" + churchid, function( data ) {
$( "#churchinfo-" + churchid ).html( data );
// alert("ajax " + churchid + " call made!");
}); // .get
}; // if
$("#churchinfo-" + churchid ).slideToggle(300);
}); // nRow.click
}
[/code]

allan

Nice one. `get(0)` get's the raw HTML element, not a jQuery object. It is the same as doing `[0]` . DataTables 1.9's API generally expects raw elements, not jQuery objects. This has been significantly improved int he new API that is in the upcoming 1.10... :-)

Allan