如何在php while循环中的特定div中追加数据

时间:2018-10-19 09:25:53

标签: javascript php jquery

我有一个注释系统,其中添加了用户所做的注释,但是当我添加数据时,它是:[object HTMLCollection]: [object HTMLCollection] 而且我也想知道如何在用户发表评论的特定帖子上附加此评论。

我的php代码:     

$query =  "SELECT ph.ext, ph.likes,ph.desccription, ph.image_url,ph.email,ph.username,ph.uid ,ph.id,ph.avatar_path
          FROM photos as ph
          inner join followers as fol
          on fol.user_id = ph.uid
          where fol.uid = '$id'
          ORDER BY ph.image_url DESC limit 5";
$fire = mysqli_query($con,$query) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire)>0) {



  while ($users = mysqli_fetch_assoc($fire)) {
    $likes = $users['likes'];
    $description = $users['desccription'];
    $username = $users['username'];
    $uid = $users['uid']; 
    $pixid = $users['id'];
    $avatar_path5 = $users['avatar_path'];


    ?>


<div class="all" >
<div class="card" >
  <div class="float" >
  <div class="avatar" >
    <img src="<?php echo $avatar_path5; ?>" width="100%" class="avatar">
  </div>

      <div class="username" style="font-weight: 600; size: 14px;  text-decoration: none; color: black !important; ">
      <p style="color: black !important;"><?php echo "<div><a href='users?id=".$users['uid']."' style='color: black !important; '>
               <h3>".$users['username']."</h3>

      </div></a>"; ?></p>
</div>
</div>
   <?php
   if ($users['ext']=='mp4') {
     ?>
     <video class="videos"  controlsList="nofullscreen nodownload" style="width: 100%; height:100%;" controls autoplay="true" muted> 
 <source src="<?php echo $users['image_url']?>" type="video/mp4">

          </video>  

<?php
}else{
  ?>
  <img src="<?php echo $users['image_url']?>" alt="Avatar" style="width:100%;">
  <?php }
  ?>

             <form method="POST"  action="" >
                <div class="commentdiv">
                  <input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
                  <input type="hidden" name="username" id="username"  value="<?php echo $activeusername;?>">
                  <input type="hidden" name="uid" id="uid"  value="<?php echo $id3;?>">
          <textarea style=""  name="comment" id="comment" class="comment"  placeholder="  comment here"></textarea>
         <button type="button" style="background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    color: #3897f0; font-weight:600;" class="submit" id="button_id">comment</button>

       </div>

          </form>
        </div>
         <div id="comments" class="comments"  data-post-id="<?php echo $pixid;?>">
            <?php



$sql = "SELECT * FROM comment where post_id='$pixid' order by time2 desc limit 3";
$results = mysqli_query($con,$sql);
if (mysqli_num_rows($results)>0) {
  while ($row = mysqli_fetch_assoc($results)) {
    $commentid = $row['id'];
    $comment = $row['comment'];
    $string = covertHashtags($comment);
    echo "<p class='written'>";
    echo "<a href='users2?id=".$row['user_id']."' style='color:black !important;'><b>".$row['username']."</b></a>";
    echo "  ".$string;
     $sql3 = "SELECT * FROM comment where id ='$commentid' and user_id='$id' order by comment desc limit 5 ";
$results3 = mysqli_query($con,$sql3);
     if (mysqli_num_rows($results3)>0) {

      echo "<div class='dropdown'>
  <img src='ellipsis.png' class='dots'>
  <div class='dropdown-content'>
    <br><p  class='delete' data-delete=".$commentid.">delete</p>
  </div>
</div>";

    } 
    else{
      echo "";
    }

     echo "</p>";  


  }
}else{
  echo "";
}

            ?>

          </div>
      </div>
      <br><br>



    <?php } ?>

和我的JavaScript

<script type="text/javascript">
  $(document).on('click','.submit',function(e){
     e.preventDefault();
   //Get values of input fields from DOM structure 
   var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
         comment: $(this).parent().find("#comment").val()
    };

   $.ajax({
   url:'comments.php',  
   data:dataString,
   success:function(){
$('#comments').append('<b>'+username+'</b>: '+comment);    
   }
   });
});
</script>

我做错了什么? 我已经更新了我的代码并添加了整个PHP代码  预先感谢。

2 个答案:

答案 0 :(得分:1)

您的用户名和注释变量尚未创建。

您确实如此:

$(document).on('click','.submit',function(e){
         e.preventDefault();
       var post_id = $(this).attr("data-post-id");
       //Get values of input fields from DOM structure 
       var dataString = {
            id: $(this).parent().find("#id").val(),
            username: $(this).parent().find("#username").val(),
            uid: $(this).parent().find("#uid").val(),
             comment: $(this).parent().find(".comment").val()
        };

       $.ajax({
       url:'comments.php',  
       data:dataString,
       success:function(){
    $('#comments_'+post_id).append('<b>'+$(this).parent().find("#username").val()+'</b>: '+$(this).parent().find(".comment").val()
);    
       }
       });
    });

尤其是在这一行中编辑您的php脚本,我只是在其中添加了一个属性。:

`<button type="button" style="background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    color: #3897f0; font-weight:600;" class="submit" id="button_id" data-post-id="<?php echo $pixid;?">comment</button>`

此行还:

<div id="comments_<?php echo $pixid;?>" class="comments">

我还更新了$('#comments_'+post_id).append('<b>'+$(this).parent().find("#username").val()+'</b>: '+$(this).parent().find(".comment").val()

我在js中添加了它:

var post_id = $(this).attr("data-post-id");

答案 1 :(得分:0)

我不清楚您的期望是什么,但是从您的代码中可以看出,我认为以下内容可能会有所帮助。

(也应避免使用jQuery .on函数,而应使用.click

$('.submit', document).click(,function(e){
     e.preventDefault();
   //Get values of input fields from DOM structure 
   id = $(this).parent().find("#id").val(),
   username = $(this).parent().find("#username").val(),
   uid = $(this).parent().find("#uid").val(),
   comment = $(this).parent().find("#comment").val()
   var dataString = {
        id: id,
        username: username,
        uid: uid,
         comment: comment
   };

   $.ajax({
   url:'comments.php',  
   data:dataString,
   success:function(){
       $('#comments').append('<b>'+username+'</b>: '+comment);    
   }
   });