jquery dialog in PHP while loop

问题

The following code works fine just for the button in the very first row of the table. The buttons of the other automatically generated rows don't open any dialog. I guess the problem is that I am not assigning a different id to each button. How can I do that? I read this page but nothing worked.

<table class="table-hovered">
    <tr>
        <th class="text-left big">TITOLO</th>
        <th class="text-centered" align="center">
            <img src="img/w.png" width="35" height="35" title="wikipedia" align="middle"><br>
            wikipedia
        </th>
    </tr>
    <? while($objResult = mysql_fetch_array($objQuery))
    { ?>
        <tr>
            <td class="text-left"><?=$objResult["titolo"];?></td>
            <td class="text-centered">
                <button id="trigger" class="btn">definizione</button>
                <div id="dialog" style="display: none;" title="definizione">
                    <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe>
                </div>
            </td>
            <script>
                $("#trigger").click(function() {
                    $("#dialog").dialog("open");
                });

                $("#dialog").dialog({
                    autoOpen: false,
                    position: 'center' ,
                    title: 'definizione',
                    draggable: true,
                    width: 500,
                    height: 400, 
                    resizable: true,
                    modal: true,
                    show: 'slide',
                    hide: 'fade'
                });
            </script>
        </tr>
    <?  } ?>
</table>

回答1:

The issue is because you are creating multiple elements with the same id attribute, where the id must be unique within a single document. Instead, use common classes on the #trigger and from there find the related #dialog to be shown. Try this:

<table class="table-hovered">
    <tr>
        <th class="text-left big">TITOLO</th>
        <th class="text-centered" align="center">
            <img src="img/w.png" width="35" height="35" title="wikipedia" align="middle"><br>
            wikipedia
        </th>
    </tr>
    <? while($objResult = mysql_fetch_array($objQuery))
    { ?>
        <tr>
            <td class="text-left"><?=$objResult["titolo"];?></td>
            <td class="text-centered">
                <button class="btn trigger">definizione</button>
                <div class="dialog" style="display: none;" title="definizione">
                    <iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe>
                </div>
            </td>
        </tr>
    <?  } ?>
</table>

You can then assign a single event handler to the .trigger elements in either the <head> or just before </body>, like this:

<script type="text/javascript">
    $(function() {
        $(".trigger").click(function() {
            $(this).next('.dialog').dialog("open");
        });

        $(".dialog").dialog({
            autoOpen: false,
            position: 'center' ,
            title: 'definizione',
            draggable: true,
            width: 500,
            height: 400, 
            resizable: true,
            modal: true,
            show: 'slide',
            hide: 'fade'
        });
    });
</script>

回答2:

Theoretically like this (adding <?=$objResult["titolo"];?>to the #trigger IDs in the loop:

<td class="text-left"><?=$objResult["titolo"];?></td>
<td class="text-centered"><button id="trigger<?=$objResult["titolo"];?>" class="btn">definizione</button><div id="dialog" style="display:none;" title="definizione"><iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe></div></td>
<script>
$( "#trigger<?=$objResult["titolo"];?>" ).click(function() {

what I am not sure about is the use of the PHP "$" inside the jQuery script, that might require a bit more tweaking.

回答3:

Here is a possible solution:

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

})

来源：https://stackoverflow.com/questions/34241688/jquery-dialog-in-php-while-loop

标签

php

jquery

while-loop

dialog