Posting Comments to PHP Using Ajax

346
November 22, 2016, at 10:00 AM

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;?>" />&nbsp; &nbsp; <?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

READ ALSO
facebook like and share button javascript updating my web page content like reloading a page

facebook like and share button javascript updating my web page content like reloading a page

Hello Everyone i am stuck here. can't find out why this is happening.

242
How to get which TD has maximum width in TABLE in Javascript/Jquery?

How to get which TD has maximum width in TABLE in Javascript/Jquery?

I want to get TD which has maximum width as compared to all other TDs in TR in Jquery or Javascript. I have mentioned in width to any TD or TR.

346
How to detect if mouse position is hovering

How to detect if mouse position is hovering

I have this discussion which indicates how to make a pencil tool. .

291
Compare array against object keys and maintain order

Compare array against object keys and maintain order

I need to get data of each key from a passed in input array. Let's say my input array is:.

263