jQuery dialog apre tutti i pulsanti assieme

[alval]

Sto usando Jquery dialog all'interno di una tabella e un ciclo while PHP.

Lo script è il seguente:

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

La tabella in HTML/PHP è la seguente:

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

Come potete vedere, la tabella crea un pulsante in ogni riga (correttamente) e i pulsanti funzionano (cioé aprono una finestra dialog).
Il problema è che quando clicco su qualsiasi dei pulsanti, si aprono le finestre di dialog di tutti i pulsanti assieme, una sopra l'altra.

Non riesco a capire come aprire solo la finestra del pulante che viene cliccato.
Ho anche provato con:

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

ma non funziona.

[m4rko80]

Ciao, certo perchè hai assegnato una classe e non un id univoco. Quindi tutti i .dialog si aprono.
Dovresti lavorare sugli id oppure provare ad usare
$(".trigger").click(function(){
$(this).next('.dialog').dialog('open');
});

Ps
non ricordo se next() è corretto ma comunque sta per indicare il primo dialog adiacente al button

[alval]

Ecco la soluzione che ho trovato:

$("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");
      });
})

Ecco qui il risultato:
http://www.trovawiki.altervista.org/oggi.php