How I view every contents in jquery dialog using php

194 views Asked by At

I am creating a table using php and this is how it create table body.

while (mysqli_stmt_fetch($stmt)) {      
    // Create Table Body
    $html .= "<tr>\n";
    $html .= "  <td>$title</td>\n";
    $html .= "  <td>$date</td>";                            
    $html .= "  <td align='center'>\n";
    $html .= "      <a href='#'>\n";
    $html .= "          <span class='view' title='View This Comment'></span>\n";
    $html .= "      </a>\n";
    $html .= "  </td>\n";                           
    $html .= "  <td class='td_catchall' align='center'>\n";
    $html .= "      <a href='#'>\n";
    $html .= "          <span class='edit' title='Edit This Comment'></span>\n";
    $html .= "      </a>\n";
    $html .= "  </td>\n";                       
    $html .= "  <td align='center'>\n";
    $html .= "      <a href='#'>\n";
    $html .= "          <span class='delete' title='Delete This Comment'></span>\n";
    $html .= "      </a>\n";
    $html .= "  </td>\n";
    $html .= "</tr>\n"; 
} 

Using this table there are 3 columns to view, edit and delete each comments. I want to trigger a jquery dialog for each action. I tried to get it to work with view dialog. But it is display only one comment for each link. I added code to view dialog in while loop like this -

//Create View Blog Dialog Box 
$viewBlog  = "<div id='dialog-view'>\n";
$viewBlog .= "      <h2>$title</h2>\n";
$viewBlog .= "  <p>$date</p>\n";
$viewBlog .= "  <p>";
$viewBlog .= "          <img src='".UPLOAD_DIR.$userName."/".$image."' />";
$viewBlog .= "      $comment</p>";
$viewBlog .= "</div>\n";

UPDATE

My jQuery -

$( "#dialog-view" ).dialog({
        autoOpen: false,
        height: 450,
        width: 650,
        modal: true,
        buttons: {
            Cancel: function() {
            $( this ).dialog( "close" );
            }
        }, 
        position: { 
            my: "center top", 
            at: "center top",
            of: "#content"
        }
}); 

$( ".view" ).click(function() {
    $( "#dialog-view" ).dialog( "open" );
}); 

Can anybody help to figure this out. Thank you.

1

There are 1 answers

0
Saravanan On

If you add the code for dialog inside a while loop, it would have created multiple dialog. But all of them with same id dialog-view. So always the first occurrence loads.

You can achieve opening specific dialog by appending a variable eg: $i as follows

//Create View Blog Dialog Box 
$viewBlog  = "<div id='dialog-view-$i'>\n";

Then in the first while loop,

<span class='view' onclick='$(\"#dialog-view-$i\").dialog(\"open\");' title='View This Comment'></span>\n";