Jquery popup for each row

microsound

I added an extra column at the end of my table to display an icon for each row which initiate a jquery popup. At the moment I managed work with the first row, but it works only with the first row and not with the others. The icon displays for each row, but the jquery popup only from the first row opens. i believe i do some mistake with "fnDrawCallback" maybe the correct would be "fnRowCallback". Any suggestion would be helpful.

Here is my code so far:
[code]

$(document).ready(function(){
$("#schedulesRunning").dataTable( {
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 8 ] },
{ "bVisible": false, "aTargets": [ 0 ] }
],
"sAjaxSource": "schedules_running.php",
"fnDrawCallback": function () {
$( "#my-button" ).on('click', function(e) {
$( "#element_to_pop_up" ).bPopup({
easing: 'easeOutBack',
speed: 450,
transition: 'slideDown'
});
});
}
});
});

[/code]

Part of the server side processing script:
[code]
while ($row = mysql_fetch_row($main_query))
{
// add an extra column that has a link
$row[] = "

X

<!----- POPUP CONTENT START --------->


This Row is : #{$row[0]} and promo date: {$row[1]},

Test area to display details, even links or buttons.


<!--POPUP CONTENT END ---------------->

";
$response['aaData'][] = $row;
}
[/code]

sparh

Hi,
have you tried using a class instead of an id ?
Your code
[code] $( "#element_to_pop_up" ).bPopup({
easing: 'easeOutBack',
speed: 450,
transition: 'slideDown'
});
[/code]
replace with
[code] $( ".element_to_pop_up" ).bPopup({
easing: 'easeOutBack',
speed: 450,
transition: 'slideDown'
});
[/code]

and your processing script :
replace with

Regards

microsound

Hi,

Thank you for your suggestion, I changed id to class in javascript code, processing code and in CSS, but it still the same.

Regards,

sparh

Here is how I have implemented it http://live.datatables.net/ejudox/11/edit#preview
(click on the last column to see the popup)

microsound

Thank you, this gave me some idea, I replaced the id with class for my-button and not to element_to_popup. I should of think about it after your first reply.

[code]
$( "#my-button" ).on('click', function(e) {
[/code]

Replaced with:

[code]
$( ".my-button" ).on('click', function(e) {
[/code]

Button now appears on every row but doesn't matter for which row I click it just repeats the results.
For example there are 5 results (a, b, c, d, e), if I click on the first row it brings 'a', if I click 2nd time to the first row again it brings 'b'. If I click after on the 5th row it brings 'c' and so on. It just repeats the result does not matter on which button I click next to the row.

If I use simple links they are working fine, I just would like this 'bpopup' to work instead a link.