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>

标签： php jquery while-loop dialog

3条回答

男人必须洒脱

2楼-- · 2019-05-31 02:11

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

})

0人赞添加讨论(0) 举报

成全新的幸福

3楼-- · 2019-05-31 02:15

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.

0人赞添加讨论(0) 举报

我命由我不由天

4楼-- · 2019-05-31 02:16

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>

0人赞添加讨论(0) 举报

jquery dialog in PHP while loop

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间