how to use fnOpen with fnCreatedRow
how to use fnOpen with fnCreatedRow
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.
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.
This discussion has been closed.
Replies
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