I would strongly suspect that this has something to do with which nodes events are being attached to. The key thing to know here is that DataTables will remove nodes from the DOM when they are not being displayed (i.e. when pagination is enable, only the TR elements visible are in the DOM, the rest are cached).
So if you were to do something like $('td a.fancy-link') - then you are only going to get the nodes which are on display. To get around this there are a couple of methods: 1. Attach the events before the table is initialised (only suitable if you are using a pre-existing HTML table). 2. Use fnGetNodes to get all TR elements. 3. Use $.live();
There are two examples for this:
http://datatables.net/examples/advanced_init/events_pre_init.html
http://datatables.net/examples/advanced_init/events_post_init.html
FAQs:
Top FAQ on the right hand column: http://datatables.net/faqs
To see what nodes have events attached to them, you can use Visual Event: http://www.sprymedia.co.uk/article/Visual+Event . This will tell you what code should run when you perform certain actions.
If none of this helps, then post your initialisation code here :-)
I created a link around an icon in each row, which explains why this is not working. I can see this using Firebug but it doesn't display when I view the html code in a browser window.
Are you able to provide a link showing this in action? I see from the source that you have something like:
[code]
[/code]
For the edit-trade option. One thing that might be impacting it is that you have two $(document).ready functions. I don't know what order jQuery will execute these in - it might be worth combining them into one function. Does Visual Event show anything useful?
Ah! Sorry I should have realised earlier.... The problem is that you are doing (in order):
1. Applying the fancy box events
2. Loading the data for DataTables through Ajax
So - what you want to do is load the data and then apply the events (once the elements are in the DOM!). The way to do this is to use fnInitComplete. I believe this should do it for you:
Unfortunately not - this didn't change the edit window - it also stopped the themeroller styling being applied to the new trade link which also now opens as a seperate window instead of Fancy Box although it is outside of the table.
There is a javascript error about oTable being undefined. I'm a bit surprised by this - but it might be cause of (1) there is not 'var' keyword in front of oTable, (2) you chain the set filtering delay function.
So what I would suggest is that you download 1.7 beta 2 ( http://datatables.net/download ) and try that. Change the two instances of 'oTable' in fnInitComplete to 'this'. And finger's crossed...
Urgh! Didn't realise you were using server-side processing! There are so many options...
Try changing fnInitComplete to fnDrawCallback. I believe it will work then. It's basically the same idea, but the draw callback will occur on every draw, which is needed for server-side processing.
Yikes! I had the same problem and couldnt figure it out. Why is fnInitComplete not the correct place for that? I noticed that my generated link (via fnRender) was not available in the DOM inside fnInitComplete function.
Perhaps a bit more documentation would help on this one. I really through every callback doc without any idea what to do. Thanks to the forum i finally read it...
Replies
I used this to trigger Fancybox - it works outside the table but not inside it!
[code] $("a.fancy-link").fancybox({
'width': 400,
'height': 400,
'overlayOpacity': 0.6,
'autoScale': false,
'type': 'iframe'
});
[/code]
I would strongly suspect that this has something to do with which nodes events are being attached to. The key thing to know here is that DataTables will remove nodes from the DOM when they are not being displayed (i.e. when pagination is enable, only the TR elements visible are in the DOM, the rest are cached).
So if you were to do something like $('td a.fancy-link') - then you are only going to get the nodes which are on display. To get around this there are a couple of methods: 1. Attach the events before the table is initialised (only suitable if you are using a pre-existing HTML table). 2. Use fnGetNodes to get all TR elements. 3. Use $.live();
There are two examples for this:
http://datatables.net/examples/advanced_init/events_pre_init.html
http://datatables.net/examples/advanced_init/events_post_init.html
FAQs:
Top FAQ on the right hand column: http://datatables.net/faqs
To see what nodes have events attached to them, you can use Visual Event: http://www.sprymedia.co.uk/article/Visual+Event . This will tell you what code should run when you perform certain actions.
If none of this helps, then post your initialisation code here :-)
Regards,
Allan
I created a link around an icon in each row, which explains why this is not working. I can see this using Firebug but it doesn't display when I view the html code in a browser window.
The Initialisation code for the page is:
[code]
// FancyBox:
$(document).ready(function() {
// New Trade window:
$("a.new-trade").fancybox({
'width': 380,
'height': 285,
'overlayOpacity': 0.6,
'autoScale': false,
'type': 'iframe'
});
// Trade Edit window:
$("a.edit-trade").fancybox({
'width': 400,
'height': 400,
'overlayOpacity': 0.6,
'autoScale': false,
'type': 'iframe'
});
});
// ThenmeRoller button:
$(function() {
$("button, input:submit, a.button").button();
});
// Time Ajax search calls:
jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function (oSettings, iDelay) {
iDelay = (iDelay && (/^[0-9]+$/.test(iDelay))) ? iDelay : 500;
var $this = this, oTimerId;
var anControl = $( 'div.dataTables_filter input:text' );
anControl.unbind( 'keyup' ).bind( 'keyup', function() {
var $$this = $this;
window.clearTimeout(oTimerId);
oTimerId = window.setTimeout(function() {
$$this.fnFilter( anControl.val() );
}, iDelay);
});
return this;
}
// DataTable:
$(document).ready(function(){
oTable = $('#trade_table').dataTable({
'bProcessing':true,
'bServerSide':true,
'bJQueryUI': true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"iDisplayLength": 15,
// label td elements with trade id:
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.setAttribute( 'id', aData[0] );
return nRow;
},
"aoColumns" : [
{sWidth: null, "bVisible": false},
{sWidth: '55px', "sClass": "center edit", "bSortable": false},
{sWidth: '175px', "sClass": "center"},
{sWidth: '80px', "sClass": "center"},
{sWidth: '80px', "sClass": "center"},
{sWidth: '105px', "sClass": "right"},
{sWidth: '105px', "sClass": "right"},
{sWidth: '105px', "sClass": "right"},
{sWidth: '175px', "sClass": "center"},
{sWidth: '175px', "sClass": "center"},
{sWidth: '120px', "sClass": "right"},
{sWidth: '70px', "sClass": "right"},
{sWidth: '60px', "sClass": "center delete", "bSortable": false }
],
"aaSorting": [[ 0, "desc" ]],
'sAjaxSource':'http://admin.3d-forex.com/ajax/get_trade_data.php'
}).fnSetFilteringDelay();
});
// Delete trade and redraw table:
function del_trade(id) {
if (confirm("Are you sure you want to delete this trade record?")){
var data = 'id=' + id ;
$.ajax({
type: "GET",
url: "http://admin.3d-forex.com/ajax/delete_trade_record.php",
data: data,
cache: false,
success: function() {
oTable.fnDraw();
}
});
}
}
[/code]
At the moment when a link is clicked this opens in a new window.
[code]
[/code]
For the edit-trade option. One thing that might be impacting it is that you have two $(document).ready functions. I don't know what order jQuery will execute these in - it might be worth combining them into one function. Does Visual Event show anything useful?
Allan
1. Applying the fancy box events
2. Loading the data for DataTables through Ajax
So - what you want to do is load the data and then apply the events (once the elements are in the DOM!). The way to do this is to use fnInitComplete. I believe this should do it for you:
[code]
$(document).ready(function() {
// DataTable:
oTable = $('#trade_table').dataTable({
'bProcessing':true,
'bServerSide':true,
'bJQueryUI': true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"iDisplayLength": 15,
// label td elements with trade id:
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.setAttribute( 'id', aData[0] );
return nRow;
},
"aoColumns" : [
{sWidth: null, "bVisible": false},
{sWidth: '55px', "sClass": "center edit", "bSortable": false},
{sWidth: '175px', "sClass": "center"},
{sWidth: '80px', "sClass": "center"},
{sWidth: '80px', "sClass": "center"},
{sWidth: '105px', "sClass": "right"},
{sWidth: '105px', "sClass": "right"},
{sWidth: '105px', "sClass": "right"},
{sWidth: '175px', "sClass": "center"},
{sWidth: '175px', "sClass": "center"},
{sWidth: '120px', "sClass": "right"},
{sWidth: '70px', "sClass": "right"},
{sWidth: '60px', "sClass": "center delete", "bSortable": false }
],
"aaSorting": [[ 0, "desc" ]],
'sAjaxSource':'http://admin.3d-forex.com/ajax/get_trade_data.php',
"fnInitComplete": function () {
// New Trade window:
$("a.new-trade", oTable.fnGetNodes()).fancybox({
'width': 380,
'height': 285,
'overlayOpacity': 0.6,
'autoScale': false,
'type': 'iframe'
});
// Trade Edit window:
$("a.edit-trade", oTable.fnGetNodes()).fancybox({
'width': 400,
'height': 400,
'overlayOpacity': 0.6,
'autoScale': false,
'type': 'iframe'
});
}
}).fnSetFilteringDelay();
});
[/code]
Allan
So what I would suggest is that you download 1.7 beta 2 ( http://datatables.net/download ) and try that. Change the two instances of 'oTable' in fnInitComplete to 'this'. And finger's crossed...
Allan
[code] $(document).ready(function() {
// DataTable:
oTable = $('#trade_table').dataTable({
'bProcessing':true,
'bServerSide':true,
'bJQueryUI': true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"iDisplayLength": 15,
// label td elements with trade id:
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
nRow.setAttribute( 'id', aData[0] );
return nRow;
},
"aoColumns" : [
{sWidth: null, "bVisible": false},
{sWidth: '55px', "sClass": "center edit", "bSortable": false},
{sWidth: '175px', "sClass": "center"},
{sWidth: '80px', "sClass": "center"},
{sWidth: '80px', "sClass": "center"},
{sWidth: '105px', "sClass": "right"},
{sWidth: '105px', "sClass": "right"},
{sWidth: '105px', "sClass": "right"},
{sWidth: '175px', "sClass": "center"},
{sWidth: '175px', "sClass": "center"},
{sWidth: '120px', "sClass": "right"},
{sWidth: '70px', "sClass": "right"},
{sWidth: '60px', "sClass": "center delete", "bSortable": false }
],
"aaSorting": [[ 0, "desc" ]],
'sAjaxSource':'http://admin.3d-forex.com/ajax/get_trade_data.php',
"fnInitComplete": function () {
// New Trade window:
$("a.new-trade", this.fnGetNodes()).fancybox({
'width': 380,
'height': 285,
'overlayOpacity': 0.6,
'autoScale': false,
'type': 'iframe'
});
// Trade Edit window:
$("a.edit-trade", this.fnGetNodes()).fancybox({
'width': 400,
'height': 400,
'overlayOpacity': 0.6,
'autoScale': false,
'type': 'iframe'
});
}
}).fnSetFilteringDelay();
});
// ThenmeRoller button:
$(function() {
$("button, input:submit, a.button").button();
});
// Time Ajax search calls:
jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function (oSettings, iDelay) {
iDelay = (iDelay && (/^[0-9]+$/.test(iDelay))) ? iDelay : 500;
var $this = this, oTimerId;
var anControl = $( 'div.dataTables_filter input:text' );
anControl.unbind( 'keyup' ).bind( 'keyup', function() {
var $$this = $this;
window.clearTimeout(oTimerId);
oTimerId = window.setTimeout(function() {
$$this.fnFilter( anControl.val() );
}, iDelay);
});
return this;
}
// Delete trade and redraw table:
function del_trade(id) {
if (confirm("Are you sure you want to delete this trade record?")){
var data = 'id=' + id ;
$.ajax({
type: "GET",
url: "http://admin.3d-forex.com/ajax/delete_trade_record.php",
data: data,
cache: false,
success: function() {
oTable.fnDraw();
}
});
}
}[/code]
Try changing fnInitComplete to fnDrawCallback. I believe it will work then. It's basically the same idea, but the draw callback will occur on every draw, which is needed for server-side processing.
Allan
[code]
"fnDrawCallback": function () {
$(".showfaxstatus").fancybox();
}
[/code]
with the following code used in the server side php that includes the inline div to be displayed
[code]
$row[]="".$info."";
[/code]
I made no amendments to the original fancybox.js script.
Thanks again :-)
Perhaps a bit more documentation would help on this one. I really through every callback doc without any idea what to do. Thanks to the forum i finally read it...