I am using Jquery dialog within a table with some PHP code.

The script is as follows:

1. <script type="text/javascript"> $(function() { $(".trigger").click(function() { $(".dialog").dialog("open"); }); $(".dialog").dialog({ autoOpen: false, position: 'center' , title: 'definizione', draggable: true, width: 480, height: 380, resizable: true, modal: true, show: 'slide' }); }); </script>

The table is this:

1. <table> <tr> <th>TITLE</th> <th>info</th> </tr> <? while($objResult = mysql_fetch_array($objQuery)) { ?> <tr> <td class="text-left"><?=$objResult["title"];?></td> <td> <button class="trigger">info</button> <div class="dialog" style="display:none;" title="info"> <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?title=<?=$objResult['title'];?>"></iframe> </div> </td> </tr> <? } ?> </table>

Now, I generate a button for each table row (which is correct) and the buttons work (they open a dialog window). The problem is that when I click on any of the buttons, jquery opens all the windows simultaneously, one over the other.

I can't figure out how to open only the single window associated to its button.

I have also tried with:

1. $(this).next(".dialog").dialog("open");

but it doesn't work either.