Appending a php variable to html - php

Question

I am developing a comment box for my website. When a message is posted on the website and another user comes and wants to reply, the previous message message should display below it.
I am showing the message in a <ul>. Each UL child (which is LI), contains a table that shows the message.
Link to image
Comments Showing
Suppose these are the comments showing:
##############################Comment One By David
################################################################ Reply of David
########################## Another Reply of David
########################### Comment Two By Jhon
My messages are showing using AJAX and PHP.
An AJAX script sends data, which goes to a PHP script and then after verification goes to a database and in the mean time it's also updated on the screen.
My problem is that if I want to reply to a message at the end, or want to add a new message it works fine, but when I want to reply to a message which is previously added I do not know how to put it in between html code.
Problem
Suppose I want to reply to "David", when I submit the comment it goes below the last message not between the messages.
HTML
<div id="add-comment" title="Comment">
<ol class="timeline" id="update">
<?
$retrieve = $con->select1("*", "`comments`", "page_id=" . $page_id);
$confirm_author = 0;
while ($row = mysql_fetch_array($retrieve)) {
echo'<table class="shw-comment" id="show-comment-table" ><tbody><tr>';
$name = $con->verify_author($row['name'], $row['email'], $row['website']);
echo'<td align="left" colspan="9" id="name-td">' . $name;
$niceDay = $con->perfect_date_format($row['date_and_time']);
echo'<div align="right" id="comment-date">' . $niceDay . '</div></td></tr><tr>';
echo'<td align="left" id="user-icon-td">';
if ($name == "Author") {
echo '<div class="author" id="user-icon"></div>';
} else {
$hash = md5(strtolower(trim($row['email'])));
$default_usr = urlencode('http://localhost/king-of-developers/images/user-icon.png');
echo "<div class=\"default-user\" id=\"user-icon\"><img src=\"http://www.gravatar.com/avatar/$hash.'.jpg?s=45&d=$default_usr'\" /></div>";
}
echo '</td>';
echo'<td colspan="8" id="user-comments-td" valign="top">' . $row['user_comments'] . '</td>';
echo'</tr><tr>';
echo'<td align="right" colspan="9" id="reply-td"><input type="button" class="reply" name="reply" value="reply" title="reply"/></td>';
echo'<tr>
<td align="left" colspan="9">
<input id="comment-id' . $row['id'] . '" type="hidden" value="' . $row['id'] . '"/>';
echo'</tr>';
echo'</tbody></table></li>';
if($row['respond'] == 1){
$retrieve2 = $con->select1("*", "`comment_respond`", "comment_id=" . $row['id']);
$confirm_author = 0;
while ($row2 = mysql_fetch_array($retrieve2)) {
echo'<table class="shw-comment" id="comment-reply" ><tbody><tr>';
$name = $con->verify_author($row2['name'], $row2['email'], $row2['website']);
echo'<td align="left" colspan="9" id="name-td">' . $name;
$niceDay = $con->perfect_date_format($row2['date_and_time']);
echo'<div align="right" id="comment-date">' . $niceDay . '</div></td></tr><tr>';
echo'<td align="left" id="user-icon-td">';
if ($name == "Author") {
echo '<div class="author" id="user-icon"></div>';
} else {
$hash = md5(strtolower(trim($row2['email'])));
$default_usr = urlencode('http://localhost/king-of-developers/images/user-icon.png');
echo "<div class=\"default-user\" id=\"user-icon\"><img src=\"http://www.gravatar.com/avatar/$hash.'.jpg?s=45&d=$default_usr'\" /></div>";
}
echo '</td>';
echo'<td colspan="8" id="user-comments-td" valign="top">' . $row2['user_comments'] . '</td>';
echo'</tr><tr>';
echo'<td align="right" colspan="9" id="reply-td"><input type="button" class="reply" name="reply" value="reply" title="reply"/></td>';
echo'<tr>
<td align="left" colspan="9">
<input id="comment-id' . $row['id'] . '" type="hidden" value="' . $row['id'] . '"/>';
echo'</tr>';
echo'</tbody></table></li>';
}
}
}
?>
</ol>
Ajax code
$(".submit-comment").click(function(){
var a="",b=0;
var n=$("#your-name").val();
var e=$("#your-email").val();
var w=$("#your-website").val();
var c=$("#comments").val();
var pg=$("#page-no").val();
var rp=$("#respond").val();
var ch=$("[name=recaptcha_challenge_field]").val();
var re=$("[name=recaptcha_response_field]").val();
var confirmAuthor=0;
n=$.trim(n);
e=$.trim(e);
w=$.trim(w);
c=$.trim(c);
var h="name="+n+"&email="+e+"&web="+w+"&comment="+c+"&challenge="+ch+"&response="+re+"&respond="+rp+"&page_id="+pg;
document.getElementById("recaptcha_reload_btn").click();
if(n==""||e==""||c==""||$.trim(re)==""){
a+="\n Please Write Your 'Name' , 'Email' , 'Comments' and 'Captcha' Before Submiting. ";
b++;
}else{
var i=/[-_#'$&`~;?%^)*(#!0-9]/;
var temp=n;
temp.toLowerCase();
if(temp=="author"){
a+="\nInvalid User Name";
b++;
}
if(i.test(n)){
a+="\nPlease Write a Correct Name ! ";
b++;
}
i=/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/;
if(!i.test(e)){
a+="\nPlease Write Valid Email Address ! ";
b++;
}
}
if(b>=1){
alert(a);
}
if(b==0){
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="images/loading.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type:"POST",
url:"admin/include/ajax-comments.php",
data:h,
cache:false,
success:function(a){
$("ol#update").append(a);
$("ol#update li:last").fadeIn("slow");
document.getElementById("your-email").value="";
document.getElementById("your-name").value="";
document.getElementById("your-website").value="";
document.getElementById("comments").value="";
document.getElementById("respond").value="";
$("#recaptcha_reload_btn").click();
$("#your-name").focus();
$("#flash").hide();
}
})
}
return false;
});
PHP Code
<?php
require_once('recaptchalib.php');
$privatekey = "64444444444444";
$resp = recaptcha_check_answer($privatekey, $_SERVER["REMOTE_ADDR"], $_POST["challenge"], $_POST["response"]);
if (!$resp->is_valid) {
//What happens when the CAPTCHA was entered incorrectly
die("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
}
else
{
// Your code here to handle a successful verification
require_once '../config.php';
$con = new config();
if ($_POST) {
$name = $_POST['name'];
$email = $_POST['email'];
$web = $_POST['web'];
$comment = $_POST['comment'];
$respond = $_POST['respond'];
$page = $_POST['page_id'];
$name = $con->clean_input($name);
$email = $con->clean_input($email);
$web = $con->clean_input($web);
$comment = $con->clean_input($comment);
$name = $con->sanitizeHTML($name);
$email = $con->sanitizeHTML($email);
$web = $con->sanitizeHTML($web);
$comment = $con->sanitizeHTML($comment);
$con->validateNull($name, "Please Enter Your Name ");
$con->validateEmail($email, "Please Enter Your Valid Email");
$con->validateNull($comment, "Please Don't Leave Empty Comments");
if ($con->errorCounter == 0) {
$name = ucwords(strtolower($name));
$comment = ucfirst(strtolower($comment));
$con->setTime_zone();
$comment_time = date('Y-m-d H:i:s', time());
$comment_time = $con->perfect_date_format($comment_time);
$ip = $con->getIP();
if ($respond >= 1) {
$col[0] = "comment_id";
$col[1] = "name";
$col[2] = "email";
$col[3] = "website";
$col[4] = "user_comments";
$col[5] = "user_ip";
$col[6] = "date_and_time";
$data[0] = "'" . $respond . "'";
$data[1] = "'" . $name . "'";
$data[2] = "'" . $email . "'";
$data[3] = "'" . $web . "'";
$data[4] = "'" . $comment . "'";
$data[5] = "'" . $ip . "'";
$data[6] = "'" . $comment_time . "'";
$con->insert("`comment_respond`", $col, $data);
$con->update("`comments`", "`respond`= 1","`id`='".$respond."'");
}
if ($respond == 0) {
$col[0] = "page_id";
$col[1] = "respond";
$col[2] = "name";
$col[3] = "email";
$col[4] = "website";
$col[5] = "user_comments";
$col[6] = "user_ip";
$col[7] = "date_and_time";
$data[0] = "'" . $page . "'";
$data[1] = "'" . $respond . "'";
$data[2] = "'" . $name . "'";
$data[3] = "'" . $email . "'";
$data[4] = "'" . $web . "'";
$data[5] = "'" . $comment . "'";
$data[6] = "'" . $ip . "'";
$data[7] = "'" . $comment_time . "'";
$con->insert("`comments`", $col, $data);
$comment_id = mysql_insert_id();
}
} else {
$arraysize = count($con->errorMsg);
for ($i = 0; $i < $arraysize; $i++) {
echo $con->errorMsg[$i] . "<br>";
}
}
$confirm_author = 0;
$con->close_connection();
}
}
?>
<li>
<?php
if ($respond >= 1){
echo '<table class="shw-comment" id="comment-reply">';
}
if ($respond == 0){
echo '<table class="shw-comment" id="show-comment-table">';
}
?>
<tbody>
<?
$name = $con->verify_author($name, $email, $web);
?>
<tr>
<td align="left" colspan="9" id="name-td">
<? echo $name; ?>
<div align="right" id="comment-date">
<? echo $comment_time; ?>
</div>
</td>
</tr>
<tr>
<td align="left" id="user-icon-td">
<?
if ($name == "Author") {
echo '<div class="author" id="user-icon"></div>';
} else {
$hash = md5(strtolower(trim($email)));
$def_usr = urlencode('http://www.kingofdevelopers.com/images/user-icon.jpg');
echo "<div class='default-user' id=\"user-icon\"><img src=\"http://www.gravatar.com/avatar/$hash.'.jpg?s=45&d=$def_usr'\" /></div>";
}
?>
</td>
<td colspan="8" id="user-comments-td" valign="top">
<? echo $comment; ?>
</td>
</tr>
<tr>
<td align="right" colspan="9" id="reply-td">
<input type="button" class="reply" name="reply" value="reply" title="reply" />
</td>
</tr>
<tr>
<td align="left" colspan="9">
<?
if($respond >= 1){
$conct ='comment-id'.$respond;
echo "<input id='$conct' type='hidden' value=''/>";
}
if($respond == 0){
$conct ='comment-id'.$comment_id;
echo "<input id='$conct' type='hidden' value=''/>";
}
?>
</td>
</tr>
</tbody>
</table>

Answer 1

If one were to tag each comment with a unique ID, then reference this ID in your AJAX response.
Once the response is received simply find the matching ID and insert HTML comment snippet accordingly.