popup a javascript dialog box with a php var

Question

How is it possible to pop up the right javascript box when I'm using a While in PHP. This is the code:

while($result= mysql_fetch_array($data)){
    <tr class="<?php echo $style;?>">
        <td><?php echo $result['commissie'];?></td>
        <td class="small"><?php echo $result['volgorde'];?></td>
        <td class="small">
            <div id="dialog-overlay"></div>
                <div id="dialog-box">
                    <div class="dialog-content">
                        <h1>Verwijder van commissie: "<?php echo $result['commissie'];?>"</h1>                                              
                        <div id="dialog-message">
                            <p>Weet je zeker dat je <?php echo $result['commissie'];?>. <?php echo $result_achternaam;?> wilt verwijderen uit de commissie? Dit betekend dat het contactpersoon automatisch zal worden verwijdert uit het systeem.</p>
                        </div>
                        <a href="../checks/delete_commissie.php?id=<?php echo $result['id'];?>" class="button">Ja</a>
                        <a href="#" class="button_no">Nee</a>
                        <div class="clear"></div>
                    </div>
                </div>
             </div> 
             <a href="javascript:popup('<?php echo $result['id'];?>')"><img src="../../images/delete.png"/></a>
         </td>
    </tr>
<?php }//CLOSE THE WHILE

This is the javascript:

$(document).ready(function () {

    $('a.button_no').click(function () {     
    $('#dialog-overlay, #dialog-box').hide();       
    return false;
    });
    $(window).resize(function () {
    if (!$('#dialog-box').is(':hidden')) popup();       
    }); 
});

function popup() {

    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();

    var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());  
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();           
}

The problem is when i show a dialog box the system wil always pop up the first one because in the table in the WHILE

1. ids must be unique on a document ... 2. your passing a variable to `popup` and not receiving / doing anything with it ... 3. I suggest you use ajax to get the data/html for the popup, [see here for an example](http://stackoverflow.com/questions/3694693/how-to-have-jqueryui-dialog-box-dynamically-load-content) — Manse, Jan 17 '13 at 16:29

PassKit · Answer 1 · 2013-01-17T16:47:20.330

Your issue appears to be due to duplicate selectors generated in your while loop. ID attributes need to be unique.

<div id="dialog-overlay"></div>
<div id="dialog-box">

The jQuery $('#dialog-box') will always select the first instance of #dialog-box.

You could increment a variable in your while loop and, then use that to trigger your box.

$i = 1;

while($result= mysql_fetch_array($data)){ ?>
    <tr class="<?php echo $style;?>">
        <td><?php echo $result['commissie'];?></td>
        <td class="small"><?php echo $result['volgorde'];?></td>
        <td class="small">
            <div id="dialog-overlay<?php echo $i; ?>"></div>
                <div id="dialog-box<?php echo $i; ?>">
                    <div class="dialog-content">
                        <h1>Verwijder van commissie: "<?php echo $result['commissie'];?>"</h1>                                              
                        <div id="dialog-message<?php echo $i; ?>">
                            <p>Weet je zeker dat je <?php echo $result['commissie'];?>. <?php echo $result_achternaam;?> wilt verwijderen uit de commissie? Dit betekend dat het contactpersoon automatisch zal worden verwijdert uit het systeem.</p>
                        </div>
                        <a href="../checks/delete_commissie.php?id=<?php echo $result['id'];?>" class="button">Ja</a>
                        <a href="#" class="button_no" data-buttonID="<?php echo $i; ?>">Nee</a>
                        <div class="clear"></div>
                    </div>
                </div>
             </div> 
             <a href="javascript:popup('<?php echo $result['id'];?>')"><img src="../../images/delete.png"/></a>
         </td>
    </tr>
<?php $i++; }//Increment $i andCLOSE THE WHILE

Javascript

var dialogBox = 1;

$(document).ready(function () {

    $('a.button_no').click(function (e) {
        e.preventDefault();
        dialogBox = $(this).data('buttonID');   
        $('#dialog-overlay' + dialogBox + ', #dialog-box' + dialogBox).hide();       
    });

    $(window).resize(function () {
       if (!$('#dialog-box' + dialogBox).is(':hidden')) popup();       
    }); 
});

function popup() {

    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();

    var dialogTop =  (maskHeight/3) - ($('#dialog-box' + dialogBox).height());  
    var dialogLeft = (maskWidth/2) - ($('#dialog-box' + dialogBox).width()/2); 

    $('#dialog-overlay' + dialogBox).css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box' + dialogBox).css({top:dialogTop, left:dialogLeft}).show();           
}

Matanya · Answer 2 · 2013-01-17T16:47:58.530

Looking at what your code does it seems like you could achieve it more easily by calling the function using an event handler, with the contextual this keyword. Obviously you need to use classes instead of ID's, as @PassKit mentioned

$("a").click(function(e){
e.preventDefault();
dialog = $(this).prev(); // will get the .dialog_overlay div
// now you can manipulate the dialog using `dialog` as a reference point. 
//e.g dialog.find(".dialog_box").show() etc...
});

popup a javascript dialog box with a php var

2 Answers2