Question

I am trying to place a jquery modal popup button against each row in a table meaning there could be up to 25 buttons on a page – each button needs to popup a dialog containing different content pulled from a database based on the id of the row.

I can get the button to work and display the content properly if it is shown once on the page outside the loop but as soon as I put it into the loop it starts behaving very oddly. When I click any of the buttons it displays the popup with the dynamic content inside but clicking exit cycles through the loop and shows all the dynamic content until all the rows have been shown.

For example, if I have 4 rows when I click button one I get a popup with the content for row one but if I click exit it then shows the content for row two and so on until they have all been shown which is obviously not correct.

How can I get it so it only shows the popup once and only shows the corresponding id rather than all of them?

<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 100000;
$(function() {
    $( ".jui-dialog" ).dialog({
        autoOpen: false,
    modal: "true"
    });

    $( ".button" ).click(function() {
        $( ".jui-dialog" ).dialog( "open" );
        return false;
    });
});
</script>


<begin loop>

<button class="button">Popup</button>
<div class="jui-dialog">
    <div class="jui-dialog-inner">
        <p><?=$id?></p>
    </div>
</div>

<end loop>

Answer 1

If you don’t want to change your dom, you might select the dialog which is just after your button :

$( ".button" ).click(function() {
    $(this).parent().children().eq($(this).index()+1).dialog( "open" );
    return false;
});

But giving an id to your button would be cleaner :

<button class="button" id="<?=$id?>">Popup</button>
<div class="jui-dialog" for="<?=$id?>">
    <div class="jui-dialog-inner">
        <p><?=$id?></p>
    </div>
</div>

$( ".button" ).click(function() {
    $('.jui-dialog[for="'+this.id+'"]').dialog( "open" );
    return false;
});