jquery dialog in PHP while loop

Question

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>

Since you are doing a loop, you have n number of <button id="trigger"> and n number of <div id="dialog">. Since ids are supposed to be unique, then jQuery(/javascript) will only find and bind to the first one. You need to make those ids unique, or change them to a class <button class="trigger"> / <div class="dialog"> and $(".trigger").click(function() {$(".dialog").dialog("open"); });/$(".dialog").dialog({... — Sean
– Sean, Commented Dec 12, 2015 at 15:50
This solution works, but when I click on any button, all the dialog windows open (one over the other). — Alessandro
– Alessandro, Commented Dec 12, 2015 at 16:13

Rory McCrossan · Accepted Answer · 2015-12-12 15:50:32Z

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>

This procedure doesn't seem to work. When I click on the buttons, none opens a dialog window.

Johannes · Accepted Answer · 2015-12-12 15:50:44Z

0

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.

answered Dec 12, 2015 at 15:50

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Comments

Alessandro · Accepted Answer · 2015-12-14 13:42:05Z

0

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

})

answered Dec 14, 2015 at 13:42

Alessandro

5191 gold badge8 silver badges26 bronze badges

Collectives™ on Stack Overflow

jquery dialog in PHP while loop

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related