Question

I am calling data from a database and I would like to put an ‘add’ button next to each line of data so that when clicked on will open a jquery dialog box. At the moment it only works for the first ‘add’.
Here is my code:

    $wgOut->addScript('<script type="text/javascript"> 

    ( function($) {
        $(document).ready(function() {
        $(function() {          
        $( "#alignment" )
            .dialog({
                autoOpen: false,
                title: "Align Images",
                //draggable: false,
                resizable: false,
                buttons: {"Okay": function() {$(this).dialog("close");}},

        });

        $("#imageSetting")
            .click(function() {
            $( "#alignment" ).dialog("open");
        });
        });     
        }); 
    } ) ( jQuery );

</script>'); 

$wgOut->addHTML('<div id="alignment">'); 
  $out = self::alignment();   
  $wgOut->addHtml($out);
$wgOut->addHTML('</div>');
//$wgOut->addHTML('<button id="imageSetting">Add</button>');


 $dbr = wfGetDB( DB_SLAVE );
 $results = $dbr->query("SELECT DISTINCT  img_name, img_description, img_width, img_height, img_user_text, img_timestamp
        FROM wiki_image
        ORDER BY img_timestamp ASC
    "); 

$uploaded = array();
while( $row = $dbr->fetchObject( $results ) ) {
$uploaded[] = array( $row->img_name, $row->img_width, $row->img_height, $row->img_user_text, $row->img_description);        
}


$wgOut->addHtml('<table><tr><td></td><th>Name</th><th>Thumbnail</th><th>Dimensions</th><th>User</th><th>Comment</th></tr>'); 

foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button id="imageSetting">Add</button></td><td>');     
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>'); 
$wgOut->addHtml('thumnail image'); 
$wgOut->addHtml('</td><td>'); 
$wgOut->addHTML($upload[1]); 
$wgOut->addHTML('x'); 
$wgOut->addHTML($upload[2]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>'); 
}

$wgOut->addHtml('</table>');
}

How do I make the ‘add’ button in the foreach loop call the jquery dialog for each line of data?

Answer 1

the foreach loop is probably outputting Add buttons with identical ids, if that is the case change the code so that the Add buttons should have identical class and attach an event listner to that class like

foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button class="imageSetting">Add</button></td><td>');     
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>'); 
$wgOut->addHtml('thumnail image'); 
$wgOut->addHtml('</td><td>'); 
$wgOut->addHTML($upload[1]); 
$wgOut->addHTML('x'); 
$wgOut->addHTML($upload[2]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>'); 
}

$wgOut->addHtml('</table>');
}

modify the selector as

$(".imageSetting").click(function() {
            $( "#alignment" ).dialog("open");
        });