jQuery dialog trigs all the buttons open simultaneously

[aletrento]

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

The script is as follows:

<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:

[php]

<? 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>

<? } ?>

TITLE	info

[/php]

Now, I generate a button for each table row (which is correct) and the buttons works (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.

[JimL]

This line probably just tells all modals to open (guessing they all have the dialog class).
[php]$(".dialog").dialog(“open”);[/php]

You need a way to pinpoint the exact modal you want, ie by using unique IDs.

[aletrento]

Yes.
I also tried with:

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

But it wasn’t successful.

[aletrento]

Here is the solution:

[code] $(“tr:has(.trigger):has(.dialog)”).each(function() {
var row = this
var dialog = $(".dialog", row).dialog({
autoOpen: false,
position: ‘center’,
title: ‘definizione’,
draggable: true,
width: 480,
height: 380,
resizable: true,
modal: true,
show: ‘slide’
});
$(".trigger", row).click(function() {
dialog.dialog(“open”);
});

})[/code]