Fancy Box with ReadOnly Data Issues - Pulling Data From Cells
Fancy Box with ReadOnly Data Issues - Pulling Data From Cells
Hey guys!
We are having an issue with the Fancy Box plugin, we are using DataTables to put information into a Fancy Box from the tables themselves. We want to be able to pull specific names, depending on the row a person is selecting and display the information in the fancy box. For example:
Select 'John Appleseed' -> Fancybox Pops up with more information -> Displays name, telephone number, address, etc.
The problem comes in where we can't get fancybox to display the data properly or dynamically with DataTables. Is there a specific way we should approach this? I will display the code we are using for the FancyBox along with different failed attempts we have tried in the past.
[code]
"aoColumns": [
{ "mData": null, "sClass": "center", "sDefaultContent": ''},
{ "mData": "name", "sClass": "center" },
{ "mData": "hotel", "sClass": "center" },
{ "mData": "total", "sClass": "center" },
{ "mData": "time", "sClass": "center", "bVisible": false }
],
"oTableTools": {
"sRowSelect": "single",
//"fnRowSelected": function(node){
// aData = myTable.fnGetData(node[1]); //nice array of cell values
//if(aData[0]=='Delivery') return ;
//$("name").val(aData[1]);
//},
[/code]
That is the columns and TableTools part we are using to try and call the specific cell data.
[code]
//"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// testRow = nRow;
// testName = aData['name'];
//},
"fnDrawCallback": function () {
//testRow = myTable.fnGetData(this)[1];
//var anTds = fnGetTds( $('#product-table thead tr:eq(1)')[0] );
// var oTT = TableTools.fnGetInstance( 'product-table' );
//var aData = oTT.fnGetSelectedData();
// $("#product-table tbody tr").click(function() {
//var position = searchTable.fnGetPosition(this); // getting the clicked row position
//var contactId = searchTable.fnGetData(position)[1]; // getting the value of the first (invisible) column
//});
$(".fancybox").fancybox({
//'title': '' + contactId,
'maxWidth': 600,
'maxHeight': 250,
//'href': 'http://hotelservedev.jvgames.com:8060',
'fitToView': true,
'width': '60%',
'height': '60%',
'autoSize': false,
'closeClick': false,
'openEffect': 'elastic',
'closeEffect': 'elastic',
'openSpeed': 'slow',
'openEasing': 'swing',
'type': "html",
'helpers' : {
'overlay' : {
'css' : {
'background' : 'rgba(37, 37, 38, 0.65)',
'margin-bottom' : '300px',
'background-size' : '100%'
}
}
},
'content' : 'customer detailsName: <?php echo $leave ?>
Cust ID: #1234Credit Card: ****-****-****-1234
Exp: 6/13CV: 123Phone: +1-702-123-1234Check-in: 9/13/13
Check-out: 10/13/13
Billing Address:
1234 Rainbow Lane.
Las Vegas, NV 89147-4114'
});
[/code]
This is the fancy box code with the call backs to attempt to get the names themselves. The problem comes in when we try to put a dynamic jQuery variable in the content section of fancybox, we get errors of undefined or it sits at processing. Any help is appreciated! Thank you!
We are having an issue with the Fancy Box plugin, we are using DataTables to put information into a Fancy Box from the tables themselves. We want to be able to pull specific names, depending on the row a person is selecting and display the information in the fancy box. For example:
Select 'John Appleseed' -> Fancybox Pops up with more information -> Displays name, telephone number, address, etc.
The problem comes in where we can't get fancybox to display the data properly or dynamically with DataTables. Is there a specific way we should approach this? I will display the code we are using for the FancyBox along with different failed attempts we have tried in the past.
[code]
"aoColumns": [
{ "mData": null, "sClass": "center", "sDefaultContent": ''},
{ "mData": "name", "sClass": "center" },
{ "mData": "hotel", "sClass": "center" },
{ "mData": "total", "sClass": "center" },
{ "mData": "time", "sClass": "center", "bVisible": false }
],
"oTableTools": {
"sRowSelect": "single",
//"fnRowSelected": function(node){
// aData = myTable.fnGetData(node[1]); //nice array of cell values
//if(aData[0]=='Delivery') return ;
//$("name").val(aData[1]);
//},
[/code]
That is the columns and TableTools part we are using to try and call the specific cell data.
[code]
//"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// testRow = nRow;
// testName = aData['name'];
//},
"fnDrawCallback": function () {
//testRow = myTable.fnGetData(this)[1];
//var anTds = fnGetTds( $('#product-table thead tr:eq(1)')[0] );
// var oTT = TableTools.fnGetInstance( 'product-table' );
//var aData = oTT.fnGetSelectedData();
// $("#product-table tbody tr").click(function() {
//var position = searchTable.fnGetPosition(this); // getting the clicked row position
//var contactId = searchTable.fnGetData(position)[1]; // getting the value of the first (invisible) column
//});
$(".fancybox").fancybox({
//'title': '' + contactId,
'maxWidth': 600,
'maxHeight': 250,
//'href': 'http://hotelservedev.jvgames.com:8060',
'fitToView': true,
'width': '60%',
'height': '60%',
'autoSize': false,
'closeClick': false,
'openEffect': 'elastic',
'closeEffect': 'elastic',
'openSpeed': 'slow',
'openEasing': 'swing',
'type': "html",
'helpers' : {
'overlay' : {
'css' : {
'background' : 'rgba(37, 37, 38, 0.65)',
'margin-bottom' : '300px',
'background-size' : '100%'
}
}
},
'content' : 'customer detailsName: <?php echo $leave ?>
Cust ID: #1234Credit Card: ****-****-****-1234
Exp: 6/13CV: 123Phone: +1-702-123-1234Check-in: 9/13/13
Check-out: 10/13/13
Billing Address:
1234 Rainbow Lane.
Las Vegas, NV 89147-4114'
});
[/code]
This is the fancy box code with the call backs to attempt to get the names themselves. The problem comes in when we try to put a dynamic jQuery variable in the content section of fancybox, we get errors of undefined or it sits at processing. Any help is appreciated! Thank you!
This discussion has been closed.
Replies
You might then use:
[code]
$('#exampleTable tbody').on( 'click', 'tr', function () {
var data = myTable.fnGetData( this );
// Do something with the data to render the fancy box content
// Open / display the fancy box
} );
[/code]
It hangs around the fnGetData function which will get the source data for the row in question.
Allan
$("#product-table tr").click(function() {
$.fancybox({
//'title': '' + contactId,
'maxWidth': 600,
'maxHeight': 250,
//'href': 'http://hotelservedev.jvgames.com:8060',
'fitToView': true,
'width': '60%',
'height': '60%',
'autoSize': false,
'closeClick': false,
'openEffect': 'fade',
'closeEffect': 'fade',
'showNavArrows': true,
'closeBtn': true,
'openSpeed': 'normal',
'openEasing': 'swing',
'type': "iFrame",
'helpers' : {
'overlay' : {
'css' : {
'background' : 'rgba(37, 37, 38, 0.65)',
'background-size' : '100%'
}
}
},
'content' : 'customer detailsName: <?php echo $name; ?>
Cust ID: #1234Credit Card: ****-****-****-1234
Exp: 6/13CV: 123Phone: +1-702-123-1234Check-in: 9/13/13
Check-out: 10/13/13
Billing Address:
1234 Rainbow Lane.
Las Vegas, NV 89147-4114'
});
});
}
[/code]
That is the code for the fancybox and how it opens. So when a row is selected it manages to open the fancybox, the problem is pulling content from the server and posting it in the fancybox along with the table. Each row has to be individual which I think we need server side to get the row ID's right?
[code]
$("#product-table tbody").on( 'click', 'tr', function() {
var rowData = table.fnGetData( this );
...
} );
[/code]
i.e. move your click handler outside the fnDrawCallback .
Allan