setIntervalを使用してページを更新する

Question

新しいコメントを確認するためにsetInterval関数を作成しようとしています。選択して投稿します。これまでのところ、それは「並外れた」働きですが、どうしたいのかは分かりません。それがやっていることは、3秒ごとにすべてのコメントを書き直すのではなく、すべてのコメントを再投稿することです。

コメントを更新するだけでは間違っていますか？

HTML

<form action="" method="POST" id="comment-form"> 
      <textarea id="home_comment" name="comment" placeholder="Write a comment..." maxlength="1000" required></textarea><br> 
      <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> 
      <input id="comment-button" name="submit" type="submit" value="Post"> 
     </form> 
     <div id="comment-container"> 

AJAX

function commentRetrieve(){ 

$.ajax({ 
     url: "ajax-php/comment-retrieve.php", 
     type: "get", 
     success: function (data) { 
     // console.log(data); 
      if (data == "Error!") { 
       alert("Unable to retrieve comment!"); 
       alert(data); 
      } else { 
       $('#comment-container').prepend(data); 
      } 
     }, 
     error: function (xhr, textStatus, errorThrown) { 
      alert(textStatus + " | " + errorThrown); 
      console.log("error"); //otherwise error if status code is other than 200. 
     } 
    }); 


} 
setInterval(commentRetrieve, 300); 

PHP

$user = new User(); 

    $select_comments_sql = " 
    SELECT c. *, p.user_id, p.img 
    FROM home_comments AS c 
    INNER JOIN (SELECT max(id) as id, user_id 
       FROM profile_img 
       GROUP BY user_id) PI 
     on PI.user_id = c.user_id 
    INNER JOIN profile_img p 
     on PI.user_id = p.user_id 
    and PI.id = p.id 
    ORDER BY c.id DESC 
"; 

if ($select_comments_stmt = $con->prepare($select_comments_sql)) { 
    //$select_comments_stmt->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $select_comments_stmt->execute(); 
    //$select_comments_stmt->bind_result($comment_id, $comment_user_id, $comment_username, $home_comments, $comment_date, $commenter_user_id, $commenter_img); 
    //$comment_array = array(); 
    $rows = $select_comments_stmt->fetchAll(PDO::FETCH_ASSOC); 
    foreach ($rows as $row) { 
     $comment_id = $row['id']; 
     $comment_user_id = $row['user_id']; 
     $comment_username = $row['username']; 
     $home_comments = $row['comment']; 
     $comment_date = $row['date']; 
     $commenter_user_id = $row['user_id']; 
     $commenter_img = $row['img']; 
     $commenter_img = '<img class="home-comment-profile-pic" src=" '.$commenter_img.'">'; 
     if ($home_comments === NULL) { 
      echo 'No comments found.'; 
     } else { 
      echo '<div class="comment-post-box">'; 
      echo $commenter_img; 
      echo '<div class="comment-post-username">'.$comment_username. '</div>'; 
      echo '<div>'.$comment_date. '</div>'; 
      echo '<div class="comment-post-text">'.$home_comments. '</div>'; 
      echo '</div>'; 
     } 
    } 
} 

Answer 1

あなたはコメントを持っているとき、あなたは新しいものを印刷するためです。私がお勧めするのは、JSONを使ってコメント配列を取得し、各コメントにIDを渡し、IDが既にリストに存在するかどうかを確認することです。あなただけの新しいコメントを貼り付けるその方法は、ここでの例です：
HTML

<form action="" method="POST" id="comment-form"> 
     <textarea id="home_comment" name="comment" placeholder="Write a comment..." maxlength="1000" required></textarea><br> 
     <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> 
     <input id="comment-button" name="submit" type="submit" value="Post"> 
    </form> 
    <div id="comment-container"> 
     <div id="comment-1">bla bla bla</div> 
    </div> 

jsのより良い改善のために

function commentRetrieve(){ 

$.ajax({ 
    url: "ajax-php/comment-retrieve.php", 
    type: "get", 
    success: function (data) { 
    // console.log(data); 
     if (data == "Error!") { 
      alert("Unable to retrieve comment!"); 
      alert(data); 
     } else { 
      var array = JSON.parse(data); 
      $(array).each(function($value) { 
       if($('#comment-container').find('#comment-' + $value.id).length == 0) { 
        $('#comment-container').prepend($value.html); 
       } 
      }); 
     } 
    }, 
    error: function (xhr, textStatus, errorThrown) { 
     alert(textStatus + " | " + errorThrown); 
     console.log("error"); //otherwise error if status code is other than 200. 
    } 
}); 


} 
setInterval(commentRetrieve, 300); 

PHP

$user = new User(); 

$select_comments_sql = " 
SELECT c. *, p.user_id, p.img 
FROM home_comments AS c 
INNER JOIN (SELECT max(id) as id, user_id 
      FROM profile_img 
      GROUP BY user_id) PI 
    on PI.user_id = c.user_id 
INNER JOIN profile_img p 
    on PI.user_id = p.user_id 
and PI.id = p.id 
ORDER BY c.id DESC 
"; 

if ($select_comments_stmt = $con->prepare($select_comments_sql)) { 
//$select_comments_stmt->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
$select_comments_stmt->execute(); 
//$select_comments_stmt->bind_result($comment_id, $comment_user_id, $comment_username, $home_comments, $comment_date, $commenter_user_id, $commenter_img); 
//$comment_array = array(); 
$rows = $select_comments_stmt->fetchAll(PDO::FETCH_ASSOC); 
foreach ($rows as $row) { 
    $comment_id = $row['id']; 
    $comment_user_id = $row['user_id']; 
    $comment_username = $row['username']; 
    $home_comments = $row['comment']; 
    $comment_date = $row['date']; 
    $commenter_user_id = $row['user_id']; 
    $commenter_img = $row['img']; 
    $commenter_img = '<img class="home-comment-profile-pic" src=" '.$commenter_img.'">'; 
    if ($home_comments === NULL) { 
     echo 'No comments found.'; 
    } else { 
     $html = ""; 
     $html .= '<div class="comment-post-box">'; 
     $html .= $commenter_img; 
     $html .= '<div class="comment-post-username">'.$comment_username. '</div>'; 
     $html .= '<div>'.$comment_date. '</div>'; 
     $html .= '<div class="comment-post-text">'.$home_comments. '</div>'; 
     $html .= '</div>'; 
     array('id' => $comment_id, 'html' => $html) 
    } 
} 
} 

、私は見てほしいよりリアルタイムな更新のためにNodeJsソケットに移植する必要があります。ここにいくつかのリンクがあります。

Official NodeJs Website
Official SocketIo Website
Chat tutorial with socketIo and Nodejs
それが役に立てば幸い！

• ニック