Posting Comments to PHP Using Ajax - php

Question

I'm having this comment form. this comment form works but not correctly whenever I post comment it works on 1 post and on another it refreshes the page and data is also not inserted all the post are fetch by while loop
JS:
< script type = "text/javascript" >
$(function() {
$("#submit").click(function() {
var mcomment = $("input#mcomment").val(); // define the name variable
var mesgid = $("input#mesgid").val();
if (mcomment == '') // if name field is empty
{
alert("Write Comment Please."); // alert an error mesaage
} else {
$.ajax({ // JQuery ajax function
type: "POST", // ajax submit method
url: "status/savecomment.php",
data: 'mcomment=' + mcomment + '&mesgid=' + mesgid, // data sent to php file
cache: false,
success: function(html) { // if the result returns success
$("#comment_display").after(html);
}
});
}
return false;
});
});
< /script>
HTML:
<form method="POST" id="commentform">
<div class="panel-footer p15">
<div class="admin-form">
<img src="image.png">
<label for="reply1" >
<input name="mesgid" id="mesgid" type="hidden" value="
<?php echo $id ?>">
<input name="mcomment" id="mcomment" placeholder="Respond with a
comment." type="text" style="width:130%;">
</label>
<button type="submit" id="submit" class="button
btn-primary submit-btn" name="" style="width:90px; margin-
left:50px;">Comment</button>
</div>
</div>
</form>
here is all new edited code
<?php
$msql=mysql_query("SELECT * from `messages` ORDER BY `msg_id` DESC LIMIT
$post_limit");
while($messagecount=mysql_fetch_array($msql))
{
$id=$messagecount['msg_id'];
$msgcontent=$messagecount['message'];
$usermsg=$messagecount['username'];
$userimg=$messagecount['image'];
$userimg1=$messagecount['user_img'];
$usertime=$messagecount['time'];
?>
<i class="pointer" id="pagination-<?php echo $id;?>"></i>
<div style="display: block;" class="timeline-item" id="clone-3">
<div class="panel">
<div class="panel-heading">
<span class="panel-title" style="color:#000;"><?php echo
ucfirst($usermsg); ?> Updated a </span><a href="post.php?id=<?php echo
$id;?>">Post</a>
<span class="panel-date pull-right mr10 text-muted fs12">
<?php echo timeAgo($messagecount['time']);?> via Web</span>
</div>
<div class="panel-body">
<p><img src="image.php/<?php echo $userimg1;?>?width=60&
height=70&nocache&quality=100&image=http://localhost/niftians/profile
/upload/<?php echo $userimg1;?>" /> <?php echo
parse_smileys(make_clickable(nl2br(stripslashes($msgcontent))),
$smiley_folder); ?><br><br><?php if(!empty($messagecount['image'])) { ?>
<img src="status/image.php/<?php echo
$messagecount['image'];?>?width=350&nocache&quality=100&
image=http://localhost/niftians/profile/upload/<?php echo
$messagecount['image'];?>" style="margin-left:10%;">
<?php } ?></p>
</div>
</div>
</div>
<?php
$sql=mysql_query("select * from comments where msg_id_fk='$id' order by
com_id");
$comment_count=mysql_num_rows($sql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?><div class="comment_ui" id="view<?php echo $id; ?>">
<div>
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php
echo $comment_count; ?> comments</a>
</div>
</div>
<?php
}
else
{
$second_count=0;
}
?>
<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">
<?php
$listsql=mysql_query("select * from comments where msg_id_fk='$id' order
by com_id limit $second_count,2 ");
while($rowsmall=mysql_fetch_array($listsql))
{
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comments'];
$userid3=$rowsmall['username'];
$userimg5=$rowsmall['user_img'];
$usercom=$rowsmall['time'];
?> <div id="comment_display"></div>
<div class="media mt15" id="aniket">
<a class="pull-left" href="#"> <img class="media-
object thumbnail thumbnail-sm rounded mw40" src="image.php/<?php echo
$userimg5;?>?width=60&height=60&nocache&quality=100&
image=http://localhost
/niftians/profile/upload/<?php echo $userimg5;?>" alt="..."> </a>
<div class="media-body mb5">
<h5 class="media-heading mbn"><a href="<?php echo
$userid3; ?>"><?php echo ucfirst($userid3); ?></a>
<small> -<?php echo timeAgo($rowsmall['time']);?>
</small>
</h5>
<p><?php echo
parse_smileys(make_clickable(nl2br(stripslashes($comment))),
$smiley_folder); ?></p>
</div>
</div>
<?php } ?>
</div>
<form method="POST" id="commentform">
<div class="panel-footer p15">
<div class="admin-form">
<img src="image.php/<?php echo $info->img;?>?width=45&nocache&
quality=100&image=http://localhost/niftians/profile/upload/<?php echo
$info->img;?>">
<label for="reply1" >
<input name="mesgid" id="mesgid" type="hidden" value="<?php echo $id ?>">
<input name="mcomment" id="mcomment" placeholder="Respond with a
comment." type="text" style="width:130%;">
</label>
<button type="submit" id="submit" class="button
btn-primary submit-btn" name="" style="width:90px; margin-
left:50px;">Comment</button>
</div>
</div>
</form>
<br>
<?php
}
?>

Answer 1

What you need to do is
Remove Submit Button and add <input type="button">
2nd create a div in your page named as <div id="comment_display"></div>
And if this does not solve problem, post your While loop.
Replace this line
$("#submit").click(function() {
with
$("#submit").on('.submit','click',function(e) {
e.preventDefault();
Note: Your submit can work too, but you would have to stop its default behavior using jquery