Question

trying to solve a bug! I have an ajax powered social network (with like and comments etc). I have a working comment script but when i have tested it I am getting a duplication of the original post and comment. Instead of adding a comment to just the post it is adding the comments and duplicating the post and comments each time when the data is output.

I have used jquery for ajax which works fine and PHP, probably something obvious as i new to jquery and php I was hoping for some help? Sorry for the armount of code I can reduce if required

Thanks
jquery

       $(".editable").live('click', function(){


        $(this).empty();

        $(this).mouseout(function() {

            var comment = $(this).html();
            var postid = $(this).attr("pid");
            var commentuserid = $("#loggedin").attr("uid");


            if(comment == ""){

                return false;


            }else{


                    //alert(comment);
                    //alert(postid);
                    //alert(commentuserid);


                    var datastring = 'comment=' + comment + '&postid=' + postid + '&commentuserid=' + commentuserid;


                    //save with ajax clear box and then load back in
                    $.ajax({
                    type: "POST",
                    url: "uploadcomment.php",
                    data: datastring,
                    success: function(data){


                    $(".usermsg").html(data);




                    }

                    });


            }
});



});

php giving double post when comment uploaded

     <?

    $sql = "SELECT post.post, post.posttime, post.pid_imageurl, post.likes, user.name, 
    comments.comment, user.uid_imageurl, comments.comment_uid, post.pid
                FROM post
                INNER JOIN user
                ON post.uid=user.uid
                LEFT JOIN comments
                ON comments.comment_pid=post.pid
                ORDER BY pid DESC";

    $result = mysql_query($sql);

    while($row=mysql_fetch_assoc($result)){?>

    <?
    $pid = $row['pid'];
    $formattime = date("g:i:a",$row['posttime']);
    echo '<p class="speechbubble">'.$row['post'].'</p>';
    echo '<p class="msgholder" >Posted by '.$row['name'].' at '.$formattime. '<img class= "userprofileimage" src="'.$row['uid_imageurl'].'" alt="user profile image"/></p>';
?>



    <div class="editable" pid="<? echo $row['pid'];?>" contentEditable="true">
             add comment...
    </div>

    <?

    $sql_comments = "SELECT comments.comment, comments.comment_time, user.name, user.uid_imageurl FROM comments
                    INNER JOIN user
                    ON  comments.comment_uid = user.uid
                    WHERE comment_pid = '$pid' ORDER BY cid DESC";


    $result_comments = mysql_query($sql_comments);                

      $numrows_comments=mysql_num_rows($result_comments);//num of rows


              if($numrows_comments==0) //no comments
            {
                 echo '<p>Comments</p><hr><br>';
                 echo 'This post has no comments yet, be the first!';
                 echo '<br><br><br><hr><br><br>';

            }else{
                  echo '<p>Comments</p><hr><br>';
                  while($row=mysql_fetch_assoc($result_comments)){
                  $formattime_comment = date("g:i:a",$row['comment_time']);
                   echo '<p class="comment">'.$row['comment'].'</p>';
                   echo '<p class="commentposter">posted by '.$row['name']. ' at ' .$formattime_comment. '<img class="commentprofileimage" src="'.$row['uid_imageurl'].'" alt="user profile image"/></p>';

            }//$sql_comments

            echo '<hr><br><br>';

      }//else end

    }//$sql


    ?>




    </div>









</div>

–>

Answer 1

I would first be inclined to believe

$(".usermsg").html(data);

should be altering the html of another element. It is possible your ajax is returning the whole html and adding that to just an inner element and not the container. If this is the case, alter your php to return only the comment that was posted, or change this

$(".usermsg").html(data); 

to the container element. In this case, it is not duplicating, it is just adding extra html to the loaded page.

as a side note, it is definitely better to replace the whole comment block – depending on how you handle the page – than to just place in the comment that was added. This way your html will update if another user happened to be commenting as well. It will keep your comments as up to date as possible.
Little different if you are paginating, happen to be on some inner page and enough other comments were added to push the user to another page of comments. That’s another story though.