我无法在没有刷新的情况下得到Ajax的评论回复

Question

I Cannot get comment reply by Ajax under comment, But reply saved in database and If i refresh Index.php page, it display correctly. So I think my problem either in my reply display element(Div id/class or php) OR Ajax call back.

Please help me. I can't do anything last 7 days about this.

my Index.php framework

$results = mysqli_query($dbh,"SELECT * FROM comments_lite WHERE qazi_id='$tutid' ORDER BY id DESC LIMIT 20") or die(mysqli_error($dbh));

echo'<div class="content"><comment>';

    while($rows = mysqli_fetch_array($results)) {
        $id = $rows['id'];
        $username = $rows['username'];
        //etc all

            echo'<div class="post'.$id.'">
            //Comments goes here
                echo'<p class="name"><a href="#">'.$username.'</a> Says:</p>';
                echo'<span class="cdomment_time">'.$date.'</span><br/>
                <div class="avatarcnt">
                <img alt="" src="uploadprofile/'.$u_imgurl.'"/>
                </div>
                <div class="cdomment_text">';
                echo'.htmlentities($description).'<br>';
            echo'</div>';

    // Reply Start
    $query = "SELECT * FROM comments_reply WHERE parent_id ='".$id."'";
    $res = mysqli_query($dbh,$query);
    while($row = mysqli_fetch_array($res)){ 
        $parent_id = $row['parent_id'];
        $username = $row['username'];
        //etc all

            echo'<div class="rcontent"><replycomment><div class="reply'.$parent_id.'"><ul>
            //Reply goes here
                echo'<p class="name"><a href="#">'.$username.'</a> Says:</p>';
                echo'<span class="cdomment_time">'.$date.'</span><br/>
                <div class="avatarcnt">
                <img alt="" src="uploadprofile/'.$u_imgurl.'"/>
                </div>
                <div class="cdomment_text">';
                echo'.htmlentities($description).'<br>';
            </ul></div><replycomment></div>';

}   //reply while close 
}   //comment while close

echo'<comment></div>';          

my reply.php framework

$results = mysqli_query($dbh,"SELECT * FROM comments_lite WHERE qazi_id='$tutid' ORDER BY id DESC LIMIT 1") or die(mysqli_error($dbh));
$row = $results->fetch_array();
$id = $row['id'];

    $res = mysqli_query($dbh,"SELECT * FROM comments_reply WHERE parent_id ='$id' LIMIT 1") or die(mysqli_error($dbh));

        while($row = mysqli_fetch_array($res)) {
            $parent_id = $row['parent_id'];
            $username = $row['username'];

            echo'<div class="rcontent"><replycomment><div class="reply'.$parent_id.'"><ul>';
            //New reply goes here
                echo'<p class="name"><a href="#">'.$username.'</a> Says:</p>';
                echo'<span class="cdomment_time">'.$date.'</span><br/>
                <div class="avatarcnt">
                <img alt="" src="uploadprofile/'.$u_imgurl.'"/>
                </div>
                <div class="cdomment_text">';
                echo'.htmlentities($description).'<br>';
            echo'</ul></div><replycomment></div>'; 

JavaScript { here $tutid is a page id, which work well ( If u have any confusion about this )}

$(document).ready(function(){
var inputReplycom = $(".replycom");
var inputTutid = $("#tutid");
var inputparent_id = $("#parent_id");
var commentList = $(".content > comment");  // update comment

//update reply
function updateReplybox(){
    var tutid = inputTutid.attr("value");
**(EDITED)** var RID = inputparent_id.attr("value");
    $.ajax({
        type: "POST", 
        url: "reply.php", 
        data: "action=update&tutid="+ tutid,
          complete: function(data){
**(EDITED)**
          $(".postreply"+RID).append(data.responseText);
          $(".postreply"+RID).fadeIn(2000);
          }
    });
}

//on submit reply
$(".replyfrm").click(function(){
var replycom = inputReplycom.attr("value");
var parent_id = inputparent_id.attr("value");
var tutid = inputTutid.attr("value");

        $(".loader").fadeIn(400);
        $.ajax({
        type: "POST", 
        url: "reply.php", 
        data: "action=insert&replycom="+ replycom + "&parent_id="+ parent_id + "&tutid="+ tutid,

            complete: function(data){
            $(".reply_here").hide();
            updateReplybox();
            }
        });
    //we prevent the refresh of the page after submitting the form
    return false;
});

});

EDITED: New Edited Code that I am trying now which display fadeIn a blank result before refresh

In index.php change:
<div class="postreply'.$parent_id.'"><ul>

In reply.php change:
<div class="postreply'.$parent_id.'"><ul>

JavaScript change

function updateReplybox(){
    var tutid = inputTutid.attr("value");
    var RID = inputparent_id.attr("value");
        //just for the fade effect
    $.ajax({
    type: "POST", 
    url: "reply.php", 
    data: "action=update&tutid="+ tutid,
       complete: function(data){
          $(".postreply"+RID).append(data.responseText);
          $(".postreply"+RID).fadeIn(2000);
       }
    });
}

Answer 1

The following will be your js

$('#commentButton').click(function() {
replycom = document.getElementById('inputReplycom').value;
parent_id = document.getElementById('inputparent_id').value;
tutid = document.getElementById('inputTutid').value;

$.post('reply.php', {'replycom': replycom, 'parent_id': parent_id, 'tutid': tutid}, function(data) {

    var parsed = JSON.parse(data);

    var html = '<section class="comment-list block"><article id="comment-id-1" class="comment-item"> <a class="pull-left thumb-sm"> <img src="/uploads/' + parsed.photo +'" class="img-circle"> </a> <section class="comment-body m-b"> <header> <a href="#"><strong>'+parsed.username+'</strong></a> <span class="text-muted text-xs block m-t-xs">'+parsed.created_at.date+' </span> </header> <div class="m-t-sm">'+ parsed.comment +'</div></section> </article> </section>';

    $('#extraComments').append(html);
}).success(function() {
    $('#comment').val('');
    $('#commentSuccess').html('Submitted successfully!').show().delay(5000).fadeOut();
}).fail(function() {
    $('#commentFailed').html('Failed!').show().delay(5000).fadeOut();
});

});

in your reply.php get the data

$replycom = $_GET['replycom'];
$parent_id = $_GET['parent_id'];
$tutid = $_GET['tutid'];
//and process it 

Please change the var names accordingly

Edited code :

echo json_encode(array('replycom' => $replycom, 'parent_id' => $parent_id, 'tutid' => $tutid));