Integration with colorbox

jkojko

Hi everybody

I love datatables! I am trying to integrate a colorbox modal into the table, but fail. See my code. The modal popup works fine outside of the table, but not inside. The table is built dynamically, so my guessing is that somehow this breaks the colorbox.js. Help appreciated.

[code]






var aDataSet = [

['','Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A','0'],
['','Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A','0'],
['','Gecko','Camino 1.0','OSX.2+','1.8','A','0'],
['','Gecko','Camino 1.5','OSX.3+','1.8','A','0']
];


/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
/* DOES NOT WORK */
sOut += 'Outside Webpage (Iframe)';
return sOut;
}


$(document).ready(function() {
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$('#dynamic').html( '' );
var oTable = $('#example').dataTable( {

"bPaginate": false,
"bLengthChange": false,
"bStateSave": true,
"sDom": '<"top"f<"clear">>rt<<"clear">>',
"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0 ] }],
"aaSorting": [[1, 'asc']],

"aaData": aDataSet,
"aoColumns": [
{
"sTitle": "",
"sClass": "left",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
return '';
}
},

{ "sTitle": "Ort" },
{ "sTitle": "Kategorie" },
{ "sTitle": "Rabatt" },
{ "sTitle": "noch CHF", "sClass": "center" },
{
"sTitle": "verkauft",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "A";
}
return sReturn;
}
},

{ "sTitle": "markiert",
"sClass": "center",

"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "1" ) {
sReturn = '';}

/* DOES NOT WORK */
else {sReturn = 'iframe';}

return sReturn;
}

}

]
} );

$('#example 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 = "img/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'detailp' );
}
} );


} );













Title.
text text text

<!--- WORKS FINE, MODAL POPS UP --->
Outside Webpage (Iframe)








[/code]