php loop pop up box and dialog from jquery - php

Question

Hi I am using a framework called CodeIgniter and its a sample of MVC. I need a popup box where it will display the subvalues of an application however my dialog box is not working everytime I echo it. but you see i need to loop the dialog box for different values. my code is below
<?php
foreach($people as $row){
echo"<div id='dialog' title='Basic dialog'>".$row->app_name."</div>";
echo "<button id='opener'>".$row->app_name."</button>";}
?>
My javascrip code is fro jquery
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>

Answer 1

Use event delegation
$(document).on("click" , "#opener" ,function() {
$( "#dialog" ).dialog( "open" );
});

Answer 2

Update the code as below:
<?php
$i = 1;
foreach($people as $row){
echo"<div id='dialog". $i."' title='Basic dialog'>".$row->app_name."</div>";
echo "<button id='opener". $i."'>".$row->app_name."</button>";
?>
<script>
$(function() {
$( "#dialog<?php echo $i?>" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener<?php echo $i?>" ).click(function() {
$( "#dialog<?php echo $i?>" ).dialog( "open" );
});
});
</script>
<?php
$i++;
}
?>
Basically there will be multiple popup and you need to give unique id to each popup and button.

Answer 3

to use id in this situation is not good idea ... you should change id to class
echo "<button class='opener'>".$row->app_name."</button>";
then
$( ".opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
id is unique you should use a class
Enjoy :)