Event not "binding"? to links after sorting, filtering, pagination

Joyrex

I'm still learning JQuery and DataTables is one of the most amazing scripts I've come across yet, no less for the simple fact that I can implement it easily! :)

I'm trying to add a JQueryUI Modal Window to hrefs that appear in my table output (not AJAX), so the contents of another page appear inside the modal window based on the ID being passed. I found another script that does this brilliantly by using a class on each href to determine what page (with url parameters) loads into the modal window.

It works great on the initial page (and in Firebug I can see the events bound to the href that trigger the modal window), but if I go to another page, filter, sort (basically anything that changes the display on the DataTable) the binding breaks and the hrefs act normally instead of opening a modal window. Below is my code for opening the Modal window along with my DataTables code and the HTML code from a row of my rendered DataTable showing the href with the class that triggers the modal window. Any help/advice points to lead me in the right direction is greatly appreciated, and apologies if this has been asked before - I searched asking as best as I could what the problem I'm experiencing is.

DataTables code:
[code]$(document).ready(function() {
$('#Notes').dataTable({
"bAutoWidth": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
//"bFilter": false,
"bLengthChange": false,
"aaSorting": [[1,"desc"]],
"bLengthChange": false
} );

} );[/code]

Code to bind the modal window to an href and open the href inside the JQueryUI modal window:
[code]$(document).ready(function() {
$('.notelink').each(function() {
var $link = $(this);
var $dialog = $('')
.load($link.attr('href') + ' #container')
.dialog({
resizable: false,
modal: true,
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 'auto',
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});

$link.click(function() {
$dialog.dialog('open');

return false;
});
});
});[/code]

HTML code from the row of the DataTable (there's CFML in there that renders the URL variables and title attributes):
[code]


#Left(trim(Subject),25)#...

#trim(Subject)#


[/code]

Joyrex

Well, I managed to find a solution:
[code]$(document).ready(function() {
$('#Notes').dataTable({
"bAutoWidth": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
//"bFilter": false,
"bLengthChange": false,
"aaSorting": [[1,"desc"]],
"bLengthChange": false,
"fnDrawCallback": function() {
$('.notelink').each(function() {
var $link = $(this);
var $dialog = $('')
.load($link.attr('href') + ' #container')
.dialog({
resizable: false,
modal: true,
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 'auto',
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});

$link.click(function() {
$dialog.dialog('open');

return false;
});
});
}
} );

} );[/code]

And it works great - except with filtering. Every letter entered into the filter causes the same number of modal windows to be created when the link in the table is clicked, so if I search for 'house', and then click one of the filtered results hrefs, I get 5 modal windows stacked upon each other - requiring five clicks to close each one. I only noticed it as the overlay that darkens the area around the modal window got more transparent with each click of the close button in the modal window.

Any ideas on how to prevent this?

Joyrex

Oh, and the solution is contained in the fnDrawCallback section... putting the modal window script into that function is what solved it (with the exception so far of the filter problem).

allan

I'd suggest thinking about using live events ( http://datatables.net/faqs#events ) rather than using fnDrawCallback. Nothing much wrong with using fnDrawCallback, but I think you'll find live events easier to work with and faster in the browser (and less likely to leak memory).

Allan

Joyrex

Allan,

Ah! That was it - simply moving my modal window script out of the DataTables script solved the filtering issue (I moved it inside the same document.ready(function() block, but BEFORE the dataTable gets initialized. Thanks so much for the help, and once I get paid, a donation is surely coming your way!

allan

:-). Good to hear that did the job for you!

Regards,
Allan