losing jquery selectability

met00

in my table I have an image I have made selectable via jquery....

[code]
".$sdate[0]."".$arow['lname'].", ".$arow['fname']."".$arow['email']."".$slist."[/code]

[code]
//
// set all details images as clickable by class
//
$('img[alt="details"]').click( function() {
var data = {'pid' : $(this).attr('id') };
var dialog = $('').appendTo('body');
// load remote content
dialog.load(
'detailrec.php',
data,
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);

});
//[/code]

Now when the table loads the images are selectable. But, if you re-order the table, go to the next page of the table, search the table, etc. Then the images are no longer selectable. Do I have to re-run the function to re-grab the images with jquery on every action against the datatables? If so, how?

met00

for those of you looking for the answer...

[code]
$(document).ready(function(){
oTable = $('#the_table').dataTable({
"fnDrawCallback": function () {
grabimgs();
},
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[ 1, "asc" ]],
'aoColumns': [
{ 'bSortable': false },
null,
null,
null,
null,
{ 'bSortable': false },
{ 'bSortable': false }
],
});
[/code]

grabimgs is the code above to grab the images and associate the click function.

[code]
"fnDrawCallback": function () {
grabimgs();
},
[/code]

This forces datatables to regrab what is displaying on every repaint.

allan

Hi met00,

There are two alternatives to the fnDrawCallback method of applying event handlers (which can lead to duplicate event handlers being attached if one is not careful about it):

1. Use fnGetNodes() in your selector, as demonstrated here: http://datatables.net/examples/advanced_init/events_post_init.html
2. Use $().live() to attach events, which is great for this kind of thing

You might also be interested in the Visual Event bookmarklet ( http://sprymedia.co.uk/article/Visual+Event ) which will visually show elements which have event handlers attached to them.

Btw - thanks very much for your post in the "How do you use..." thread. It's great to hear that DataTables is being used in other open source applications.

Regards,
Allan

met00

okay... here's an interesting problem...

[code]function grabimgs() {
//
// set all the optout images as clickable by class
//
$('img.clickme').live('click', function() {
var row = $(this).closest("tr").get(0);
var data = $(this).attr('id');
var x=window.confirm("Are you sure you want to OptOut this Parent? ")
if (!x) {
return false;
} else {
optout(data,row);
}
});
//
// set all details images as clickable by class
//
// $('img[alt="details"]').live('click', function() {
$('img.details').live('click', function() {
var data = {'pid' : $(this).attr('id') };
var dialog = $('').appendTo('body');
// load remote content
dialog.load(
'detailrec.php',
data,
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
});
//
}[/code]

The first one works... the optout image and clicks associated to it are attached once. In the second case, the image for the details opens two images on the first creation of the tables and then even more instances if the tables are sorted or modified in any way.

met00

Me, not you!

The problem was in re-instancing the dialog...

The solution:

1) moved the following out:
var dialog = $('').appendTo('body');

and inserted:


to the start of the HTML

2) added

[code] $('#detaildialog').dialog();
$('#detaildialog').dialog('close');[/code]

to part of the $(document).ready(function(){

3) changed the function so that it didn't re-instance the dialog, just re-opened it after the load.

[code]
$('img.details').live('click', function() {
var data = {'pid' : $(this).attr('id') };
// load remote content
$('#detaildialog').load(
'a_detailrec.php',
data,
function (responseText, textStatus, XMLHttpRequest) {
$('#detaildialog').dialog('open');
}
);
});
[/code]

sometimes just looking at it for an extra two hours make it all jump out at you! :-)