resolved - fnRowCallback and binding a Bubble Popup event

miked

I'm trying to implement the jQuery Bubble Popup within each row of a datatable to show some further detail about the row of data being displayed, I need to bind a Bubble Popup event to each row being displayed and I'm not a js guy so I figured I'd stop struggling and ask for some help

my current code just to prove that the fnRowCallback is working which it is
[code]
var oTable = $('#PageTable').dataTable({
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': src="/white/getlistdata?extAssetId=<?= $extAssetId; ?>",
'bDeferRender': true,
'bStateSave': true,
'iCookieDuration': 60*60*24*7,
'bJQueryUI': true,
'bAutoWidth': false,
'sPaginationType': 'full_numbers',
"oLanguage": {"sSearch": "Search all UBL fields:" },
"sDom": '<"H"<"page_location" p><"export_widget" T>lfr>t<"F"i>',
"oTableTools": {
"sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
},
'aoColumns': [
{ "bVisible": false, "bSearchable": false},
null,
null,
null,
{ "bSortable": false, "bSearchable": false, "sClass": "not_edit"},
{ "bSortable": false, "bSearchable": false, "sClass": "not_edit"},
{ "bSortable": false, "bSearchable": false, "sClass": "not_edit"},
{ "bSortable": false, "bSearchable": false, "sClass": "not_edit"}
],
"fnServerData": fnDataTablesPipeline,
"fnDrawCallback": function () {
$('#ListTable tbody td').not('.not_edit').editable( '/ubl/tdedit', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
var aData = oTable.fnGetData( this.parentNode );
return {
"row_id": aData[0],
"column": oTable.fnGetPosition( this )[2]
};
},
indicator : 'Saving Changes...',
tooltip : 'Click to edit...',
select: true,
onblur: "submit",
placeholder : " ",
"height": "14px"

} );
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// create a bubble popup for this row
if ( aData[3] == "90" ) {
$('td:eq(3)', nRow).html( '90' );
}
return nRow;
}
});

[/code]

I've got edit-in-place functionality in there too

so here are the current Bubble Popup functions:

[code]
//create Bubble Popups for each "button" element with a loading image...
$('.detail').CreateBubblePopup({
position: 'top',
align: 'center',
innerHtml: 'loading',
innerHtmlStyle: { color:'#000000', 'text-align':'center' },
themeName: 'all-blue',
themePath: '/images/jquerybubblepopup-theme'
});

// add a mouseover event for the "button" element...
$('.detail').mouseover(function() {
//get a reference object for "this" target element
var button = $(this);
//load data asynchronously when mouse is over...
$.get('/white/showdetail/' + this.id, function(data) {
button.SetBubblePopupInnerHtml(data, false);
});
});

[/code]

the datatable field in question gets loaded with this:

[code]
mouseover for detail
[/code]

where the id is the record key that gets passed as this.id in the $get method in the $('.detail').mouseover() function just above

So I would like to bind the mouseover function to the cell in question via the fnRowCallback, but I'm not a js guy (yet) and not exactly sure how I would go about this, suggestions?

tia

Mike

miked

resolved -- it's always an easy solution once you have it figured out, took me awhile of staring at it to get the dots to connect. After playing with fnRowCallback for awhile I realized that the code needed to be within the fnDrawCallback instead:

[code]
var oTable = $('#ListTable').dataTable({
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': src="/white/getlistdata?extAssetId=<?= $extAssetId; ?>",
'bDeferRender': true,
'bStateSave': true,
'iCookieDuration': 60*60*24*7,
'bJQueryUI': true,
'bAutoWidth': false,
'sPaginationType': 'full_numbers',
"oLanguage": {"sSearch": "Search all UBL fields:" },
"sDom": '<"H"<"page_location" p><"export_widget" T>lfr>t<"F"i>',
"oTableTools": {
"sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
},
'aoColumns': [
{ "bVisible": false, "bSearchable": false},
null,
null,
null,
{ "bSortable": false, "bSearchable": false, "sClass": "not_edit"},
{ "bSortable": false, "bSearchable": false, "sClass": "not_edit"},
{ "bSortable": false, "bSearchable": false, "sClass": "not_edit"},
{ "bSortable": false, "bSearchable": false, "sClass": "not_edit"}
],
"fnServerData": fnDataTablesPipeline,
"fnDrawCallback": function () {
$('#ListTable tbody td').not('.not_edit').editable( '/ubl/tdedit', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
var aData = oTable.fnGetData( this.parentNode );
return {
"row_id": aData[0],
"column": oTable.fnGetPosition( this )[2]
};
},
indicator : 'Saving Changes...',
tooltip : 'Click to edit...',
select: true,
onblur: "submit",
placeholder : " ",
"height": "14px"

} );
// begin popup
$('.detail').CreateBubblePopup({
//selectable: true,
position: 'top',
align: 'center',
innerHtml: 'loading',
innerHtmlStyle: { color:'#000000', 'text-align':'center' },
themeName: 'all-yellow',
themePath: '/images/jquerybubblepopup-theme'
});

// add a mouseover event for the "button" element...
$('.detail').mouseover(function() {
//get a reference object for "this" target element
var button = $(this);
//load data asynchronously when mouse is over...
$.get('/white/showdetail/' + this.id, function(data) {
button.SetBubblePopupInnerHtml(data, false);
});
});
// end popup
}
});
[/code]

all better