jQuery dialog box shows only once

Question

I have a table that holds dynamic messages from users and admin has ability to reply to these messages by clicking reply. Works perfectly. Problem is there are links to open the user message in a dialog, so they can see the full user message, same with their reply (if they have replied). They can see the dialog box only ONCE. When clicking on it again it doesn't show.

Any help would be appreciated

TABLE

foreach($content as $row)
{
    //print_r($row);
    echo '<tr data-id="'.$row['ConID'].'" input type="hidden" value="'.$row['ConID'].'">';
    echo '<td data-cn="'.$row['ConName'].'">'.$row['ConName'].'</td>';
    echo '<td data-em="'.$row['ConEmail'].'">'.$row['ConEmail'].'</td>';
    echo '<td data-cm="'.$row['ConMessage'].'" >'.substr($row['ConMessage'],0,30).'<a href="#" class = "open"> ...more</a><div class = "dialog"> <p>'.$row['ConMessage'].'</p></div></td>';
    echo '<td data-dt="'.$row['ConDate'].'">'.date('d/m/y', strtotime($row['ConDate'])).'</td>';
    if($row['Replied'] == 0){
        echo '<td data-rp="'.$row['Replied'].'">No</td>';
    }
    else{
        echo '<td><a href="#" class="openReply">See Reply</a><div class = "dialogReply"><p>'.$row['Reply'].'</p></div></td>';
    }
    if($row['Replied'] == 0){
        echo '<td><input type="button" class="replySender" id="replySender" value="Reply"/></td>';
    }
    else{
        echo'<td>Replied</td>';
    }
    echo '</tr>';
}

JQUERY

$(".dialog").hide(); $(".open").click(function(){
    $(this).next(".dialog").dialog();  
});
$(".dialogReply").hide(); $(".openReply").click(function(){
    $(this).next(".dialogReply").dialog();  
});

Answer 1

The reason of why the second time doesn't work, is because when you "run" it for first time $('#my_div').dialog(), this will move the element #my_div to the root of the body into to a wrapper(DIV), so $.next() will fail the second time because the element is not longer there!; my suggestion will be set ID to the dialogs and save those ids on your anchors(). ie

<td>
    <a href="#" class="openReply" data-dlg-id="random-id-1">See Reply</a>
    <div class="dialogReply" id="random-id-1">
        <p>My Reply</p>
    </div>
</td>
<td>
    <a href="#" class="openReply" data-dlg-id="random-id-2">See Reply</a>
    <div class="dialogReply" id="random-id-2">
        <p>Other Reply</p>
    </div>
</td>

and you javascript may look like:

$(".dialogReply").hide();

$(".openReply").click(function(){
      var $dlg = $('#'+ $(this).attr('data-dlg-id'));
      if ($dlg.hasData('dialog'))
        $dlg.dialog('open');
      else
        $dlg.dialog();
});

I hope this helps. best!

Answer 2

Thanks for the reply everyone. I have it sorted.

So the div is removed once clicked on. Fixed it by using jquery clone():

$(".dialog").hide();

$(".open").click(function(){ $(this).next(".dialog").clone().dialog(); }); $(".dialogReply").hide(); $(".openReply").click(function(){ $(this).next(".dialogReply").clone().dialog(); });