I am developing a comment box for my website.
i am showing message in a UL (list). each UL child which is LI contain a table that shows the message
Url to image showing my comments
Comment Image
My messages are showing using ajax and php
ajax script sends data which goes to php script after varifcation go to data base and mean time it also updated on the screen
Problem
When i refresh the page or when whole page is loaded messages display in right order
But when i want to reply a message (using Ajax) which is previously added the Reply shows up at the end of all comments not where it should be.
For example
In the Image, Comment with the name of “DAVID” if i reply this message it shows after the message name “Abdul Rehman Javed Khan 0123456789” which is the last message.
Html
<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
$('.reply').click(function() {
var cId = $(this).closest('table').find('input[id^="comment-id"]');
$("#respond").val($(cId).val());
$("#comments").focus();
});
$(".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
<?php
require_once('recaptchalib.php');
$privatekey = "698754562000000000000000000000233255566";
$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>
Imagelink isn’t working anymore and it’s pretty hard to understand the question.
If you want it to be at the begin of your ol then use:
Instead of:
Probably to simple, but if not then i need more details.