Problems with jQuery ColorBox
Problems with jQuery ColorBox
Hi DT-Friends,
first of all: Great job to everybody here, supporting for "free" - especially the DT-Developers. Respect for this great project!
My problem:
I have a datatables set-upped with the jquery colorbox (lightbox clone)...
[code]
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'json_source.php',
"bSort": false,
"bStateSave": true
} );
$(".modalframe").colorbox({width:"760", height:"600", iframe:true});
$(".nonmodalframe").colorbox({width:"760", height:"600", iframe:false});
} );
[/code]
... and want to "lightbox" a link from a json "a href" classed "modalframe".
An "a href" on the page (outside the json) is working fine - it's lightboxed in the normal way, but the link from the json (same source!) redirects the hole page like a "normal" click.
[code]
[/code]
Is there any trick (like a callback-function?), that the json link will open in my lightbox modal iframe?
2nd Edit: Sorry, I cannot post the link, because it's used in my running admin-system with real member data.
sincere thanks,
Benny
first of all: Great job to everybody here, supporting for "free" - especially the DT-Developers. Respect for this great project!
My problem:
I have a datatables set-upped with the jquery colorbox (lightbox clone)...
[code]
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'json_source.php',
"bSort": false,
"bStateSave": true
} );
$(".modalframe").colorbox({width:"760", height:"600", iframe:true});
$(".nonmodalframe").colorbox({width:"760", height:"600", iframe:false});
} );
[/code]
... and want to "lightbox" a link from a json "a href" classed "modalframe".
An "a href" on the page (outside the json) is working fine - it's lightboxed in the normal way, but the link from the json (same source!) redirects the hole page like a "normal" click.
[code]
[/code]
Is there any trick (like a callback-function?), that the json link will open in my lightbox modal iframe?
2nd Edit: Sorry, I cannot post the link, because it's used in my running admin-system with real member data.
sincere thanks,
Benny
This discussion has been closed.
Replies
So the 'trick' is to use fnInitComplete: http://datatables.net/usage/callbacks#fnInitComplete
You might also want to check out the top FAQ (on the right) above applying events to hidden rows in DataTables: http://datatables.net/faqs
Allan
And for all, who have the same problem, here`s my (and allans ^^) source:
[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'json_source.php',
"fnInitComplete": function() {
$(".modalframe").colorbox({width:"760", height:"600", iframe:true});
$(".nonmodalframe").colorbox({width:"760", height:"600", iframe:false});
},
"bStateSave": true
} );
[/code]
Thank you very much!
It's just astounding how you thinked and coded thouroughly DataTables.
This solved my problem with colorbox too.
Out of the subject,
[code]"sDom": 'fpitpi',[/code]
works fine. The desired elements appear twice. Is this a recent feature ?
I saw some posts about displaying elements more than once but the users seemed to be stuck somehow.
Christian
For me, fnInitComplete didn't in fact do the trick : the colorbox function was fired only for the first set of result (first page).
To make it work for all result pages, I use fnDrawCallback.
http://datatables.net/usage/callbacks#fnDrawCallback
Christian
Yes indeed, the ability to specify all DataTables control elements was added with the 1.6 release. Here is an example of it in action: http://datatables.net/examples/advanced_init/dom_multiple_elements.html . As such there are a couple of older posts where I've said "not possible yet" - they are of course out of date now :-)
The problem that you are probably having with the events attached for ColorBox, is that they are only being attached to the visible elements in the DOM. If you use Visual Event ( http://sprymedia.co.uk/article/Visual+Event ) this should confirm that this is the case when you flick to the second page.
So how to get the events onto all rows... You can use live event handlers, or fnGetNodes ( http://datatables.net/api#fnGetNodes ). So a modification of the code from Benny above which should do this is:
[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'json_source.php',
"fnInitComplete": function() {
$(".modalframe", oTable.fnGetNodes()).colorbox({width:"760", height:"600", iframe:true});
$(".nonmodalframe", oTable.fnGetNodes()).colorbox({width:"760", height:"600", iframe:false});
},
"bStateSave": true
} );
[/code]
See also the FAQ entitled "My events don't work on the second page": http://datatables.net/faqs .
Also, thanks for your kind words about DataTables :-)
Regards,
Allan
Hence the need to use the function fnGetNodes() in order to ask DataTables to return an array of all TR elements in the DataTable.
Regards,
Allan
I user above code, It's work only first page, after click to next page it doesn't work.
Do you have any simple solution of this topic?
"fnDrawCallback": function() {
$(".modalframe", oTable.fnGetNodes()).colorbox({width:"750px", height:"650px", iframe:true});
},
[/code]
Hi allan
this code work for me. when click next page it still correct.
reccommend fnDrawCallback
peterXP [Thailand]
Prompt, and at me doesn't work colorbox, what not so?
Tried both "fnInitComplete" and "fnDrawCallback" doesn't help!
[code]
var oTable = $('#fixcars').dataTable({
"bProcessing": true,
"bServerSide": true,
"aaSorting": [[1, 'asc']],
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bFilter": true,
"bLengthChange": true,
"bSort": true,
"sDom": 'rtiplf',
"sAjaxSource": "/lib/getallfixcars.php?id={$id}",
"aoColumns": [
{ "sClass": "center", "bSortable": false },
null,null,null,null,null,null,null,null,null,null,null,
{ "sClass": "center", "bSortable": false },
],
"fnDrawCallback": function () {
$("a.fbox").colorbox();
}
});
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut += '';
return sOut;
}
$('#fixcars tbody td img.detail').live( 'click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
this.src = "/img/details_open.png";
oTable.fnClose( nTr );
}
else
{
this.src = "/img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
[/code]
Allan
Not sure if this bit has been covered here...I am using this (http://datatables.net/release-datatables/examples/api/row_details.html) example to get row details...I have links in my row details that are output via jquery/javascript:
[code] var smOut = '';
smOut += 'Member Functions:Details:';
smOut += 'Update Info[/code]
My colorbox is defined/referenced accordingly...it works in regular HTML links...but fails when these links are generated via jQuery as seen above...
[code]
$(document).ready(function(){
$(".iframesmall").colorbox({iframe:true, width:"800px", height:"80%"});
});
[/code]
How can I get these two to work together?
Allan
colorbox works only first page, after click to next page it doesn't work.
Do you have any simple solution of this topic?
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bJQueryUI": true
});
$(".group2").colorbox({rel:'group2', transition:"none",width:"50%", height:"75%"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"50%", height:"75%"});
$(".ajax").colorbox();
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
} );
thank you for datatables, it is a very sleek application.
i am using a basic instance of it where i have all the data in table cells.
in some of the table cells i have links that are opened with colorbox.
i just realised the links are opening with colorbox on the first page but not when navigating to subsequent pages.
i think this thread provides a solution but if i could have some help to implement it that would be great.
sorry i cannot provide a link to the live site and my knowledge of javascript is limited so a laymans solution (or just the working code) would be great, thank you.
edit: i have been trying the above suggestions and copying and pasting code snippets (and also followed links here - http://datatables.net/faqs#events) but because i am not entirely sure about javascript syntax i am not sure if i am doing it right - any help appreciated, thank you.
my head code is:
[code]
page title
// datatables code
@import "https://mywebsite.com/datatables/media/css/demo_page.css";
@import "https://mywebsite.com/datatables/media/css/demo_table_jui.css";
@import "https://mywebsite.com/datatables/examples/examples_support/themes/ui-darkness/jquery-ui-1.8.22.custom.css";
$(document).ready(function() {
oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[15, 30, 45, -1], [15, 30, 45, "All"]],
"iDisplayLength": 15
});
} );
//colorbox code
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344, top: "100px"});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%", top: "100px"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
[/code]
this is my exact code in the head:
[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "path/examples/server_side/scripts/server_processing.php",
"aLengthMenu": [[15, 30, 45, -1], [15, 30, 45, "All"]],
"iDisplayLength": 15,
"fnDrawCallback": function() {
$(".youtube", oTable.fnGetNodes()).colorbox({width:"760", height:"600", iframe:true});
},
} );
} );
[/code]