JQuery UI Dialog - only the first link works

Question

I have a list of products from a particular supplier being displayed in a <table> populated with data from my mysql database.

Within this table, each product has a link that, when clicked, should show the product details in a ui-dialog, <div id = "detalhe_produto"></div>. The dialog does open, however, it only works only for the first item in the list. The other links of the following lines do not open the dialog.

Can anyone help me?

Here's the script I am using to open the ui-dialog:

<script type="text/javascript">
$(function(){ 

 $('detalhe_produto').click(function(){ 

     var selectedVal=$("#detalhe_produto").val(); 
     var url="produto_detalhe.php?codigo="+selectedVal; 

        var dialog = $("#detalhe_produto"); 
        if ($("#detalhe_produto").length == 0) { 
            dialog = $('<div id="detalhe_produto" style="display:hidden"></div>').appendTo('body'); 
        } 
        dialog.load( 
            url, 
            {},
            function (responseText, textStatus, XMLHttpRequest) { 
                dialog.dialog({                        
                    close: function (event, ui) {                             
                        dialog.remove(); 
                    }, 
                    modal: true, 
                    width: 460 
                }); 
            } 
        ); 
    });  

});
</script>

and then the code table:

<table border="0" cellpadding="0" cellspacing="3">
  <?php do { ?>
    <tr>
      <td align="left" valign="top" class="lista_produto"><a href="#<?php $_SESSION['codigo_produto'] = $row_lista_produtos['codigo']; $_SESSION['produto'] = $row_lista_produtos['produto']; ?>"><?php echo $row_lista_produtos['codigo']; ?></a></td>
        <td width="15"></td>
    </tr>
    <?php } while ($row_lista_produtos = mysql_fetch_assoc($lista_produtos)); ?>
</table>

I have tried to change the href="#" to href="javascript: void (0)" and the result was the same.

Suggestions?

Answer 1

If you have many distinct dialogs that can be clicked open, you need to use a class selector, . instead of an ID selector, #. You may have also forgotten the #.

So instead of this:

var dialog = $("#detalhe_produto"); 

do this:

var dialog = $(".detalhe_produto"); 

**Please see this jsfiddle: http://jsfiddle.net/trpeters1/uFDdb/2/

It has a complete working demonstration of the jqueryUI dialog for multiple dialogs specific to your use case. Meaning, the dialog shows a value specific to which link was clicked.