В то время как L oop обновляет данные первой строки только при использовании с AJAX PHP

Question

У меня есть время L oop в моем PHP коде, который выбирает данные поста, такие как имя автора, время и т. Д. c.
Проблема заключается в том, что когда я пытаюсь обновить любые данные, такие как со стороны клиента, поэтому он работает только для первой строки, которая отображается. Эта проблема появляется только когда я использую AJAX, использование простой формы не вызывает эту проблему.

Реальный сценарий : Когда мне нравится первый пост, все работает нормально, но когда мне нравится второй пост, он в основном не работает и иногда обновляет данные первым сообщением $ POST_ID.

Предпочитаю ли я использовать любой другой l oop или что?

Указатель. php

while ($row = mysqli_fetch_assoc($result)) {
$user_id = $row['user_id'];
$sql = "SELECT * FROM users where id=$user_id";
$results = $connect->query($sql);
$user_d = mysqli_fetch_array($results);
$post_id = $row['post_id'];
$date = strtotime($row['published_at']);
?>

<div class="posts" id="post_<?php echo $row['post_id']?>">
<div class="pd20px">
 <a href="profile.php?id=<?php echo $user_d['id']?>">
   <div class="profile_img_on_post_div">
     <img class="profile_img_on_post" src="<?php echo $user_d['profile_img'] ?>">
   </div>
   <div class="poster_info">
     <b>
       <span>
         <?php echo $user_d['username'] ?>
       </span>
     </b>
     <?php 
if ($user_d['verified'] == 'true') {
?>
     <img src="img/verified.png" alt="Verified User" class="verified_on_post">
     <?php
}
?>
     <span style="font-weight: 400; font-size: 15px; color: #696969">
       <?php if (empty($row['is_this_a_post'])) {
if ($user_d['gender'] == 'male') {
echo ' updated his profile picture.';
}elseif ($user_d['gender'] == 'female') {
echo ' updated her profile picture.';
}
} ?>
     </span>
     <br>
     </a>
   <span style="font-size: 12px; color:#696969 ">
     <?php  echo date('d F, Y' , strtotime($row['published_at'])) ?>
   </span>
   <span style="float: right;">
     <?php 
if ($row['user_id'] == $c_user_id) {                     
?>
     <form method="POST" action="inc/delete_post.php">
       <button class="delete" name="delete" >Delete
       </button>
       <input type="text" name="post_id" hidden="true" value="<?php echo $row['post_id']  ?>">
     </form>
     <?php
}
?>
   </span>
   </div>
</div>
<div>
 <a href="post.php?id=<?php echo $post_id?>">
   <img width="100%" height="auto" src="<?php echo $row['img_location'] ?>">
 </a>
</div>
<div class="post_likes_info">
 <?php 
$result1 = mysqli_query($connect , "SELECT * FROM likes where  post_id=$post_id AND liker_id=$c_user_id");
$already_like = mysqli_num_rows($result1) ;
if ($already_like == 1) { ?>

   <button class="unlikebtn" name="unlike" id="unlike_btn">
     <span class="like_toggle">
       <svg aria-label="Unlike" class="like_ico" fill="#ed4956" height="24" viewBox="0 0 48 48" width="24">
         <path clip-rule="evenodd" d="M35.3 35.6c-9.2 8.2-9.8 8.9-11.3 8.9s-2.1-.7-11.3-8.9C6.5 30.1.5 25.6.5 17.8.5 9.9 6.4 3.5 13.7 3.5 20.8 3.5 24 8.8 24 8.8s3.2-5.3 10.3-5.3c7.3 0 13.2 6.4 13.2 14.3 0 7.8-6.1 12.3-12.2 17.8z" fill-rule="evenodd">
         </path>
       </svg>
     </span>
   </button>
   <input type="text" name="post_id" id="post_u_id" hidden="true" value="<?php echo $post_id ?>">
   <a href="post.php?id=<?php echo $post_id?>">
     <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
       <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
       </path>
     </svg>
   </a>

 <?php } elseif($already_like == 0){  ?>

   <button name="like" class="likebtn" id="like_btn" data-itemID="<?php echo $post_id?>">
     <span class="like_toggle">
       <svg aria-label="Like" class="like_ico" fill="#262626" height="24" viewBox="0 0 48 48" width="24">
         <path clip-rule="evenodd" d="M34.3 3.5C27.2 3.5 24 8.8 24 8.8s-3.2-5.3-10.3-5.3C6.4 3.5.5 9.9.5 17.8s6.1 12.4 12.2 17.8c9.2 8.2 9.8 8.9 11.3 8.9s2.1-.7 11.3-8.9c6.2-5.5 12.2-10 12.2-17.8 0-7.9-5.9-14.3-13.2-14.3zm-1 29.8c-5.4 4.8-8.3 7.5-9.3 8.1-1-.7-4.6-3.9-9.3-8.1-5.5-4.9-11.2-9-11.2-15.6 0-6.2 4.6-11.3 10.2-11.3 4.1 0 6.3 2 7.9 4.2 3.6 5.1 1.2 5.1 4.8 0 1.6-2.2 3.8-4.2 7.9-4.2 5.6 0 10.2 5.1 10.2 11.3 0 6.7-5.7 10.8-11.2 15.6z" fill-rule="evenodd">
         </path>
       </svg>
     </span>
   </button>
   <a href="post.php?id=<?php echo $post_id?>">
     <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
       <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
       </path>
     </svg>
   </a>
   <?php }  ?>
   <input type="text" name="post_id" id="post_u_id" value="<?php echo $post_id ?>">

</div>
<?php $results = mysqli_query($connect , "SELECT * FROM likes where post_id=$post_id");
?>
<span class="like_count">
 <?php echo mysqli_num_rows($results); ?> Likes
</span>
<br>
<span class="poster_name">
 <?php echo $user_d['username']?>
</span>
<span id="poster_description" class="poster_description">
 <?php echo $row['post_text']?>
</span>
<div class="comment">
 <?php 
$r  = mysqli_query($connect , "SELECT * FROM comments where post_id = $post_id ");   
$no_of_cmts =mysqli_num_rows($r) ;
if ( $no_of_cmts > 2) { ?>
 <a href="post.php?id=<?php echo $post_id?>" id="vac">View All 
   <?php echo $no_of_cmts ?> Commnets
 </a>
 <br>
 <?php }
$comments  = mysqli_query($connect , "SELECT * FROM comments where post_id = $post_id limit 2");   
while ( $cmts = $comments->fetch_array(MYSQLI_ASSOC)){ 
$commenter_id = $cmts['commenter'];
$user = mysqli_query($connect , "SELECT * FROM users WHERE id=$commenter_id");
$users_data = mysqli_fetch_array($user);
?>
 <span class="name_cmt">
   <?php echo $users_data['username'];?> 
 </span>
 <span id="comment_content">
   <?php echo $cmts['comment_content'];?>
 </span>
 <br>

 <?php }
?>
 <?php 
include_once "inc/time.php";
$time = $row['published_at'];?>
 <span class="time"> 
   <?php echo time_elapsed_string($time); ?>
 </span>

   <div class="add_a_comment">

       <div class="add_comment_section">
         <span class="hor-line">
         </span>
         <div>
           <textarea contenteditable aria-label="Add a comment…" placeholder="Add a comment…" class="addcomment_ta" autocomplete="off" autocorrect="off" id="comment_content" name="comment_content" id="editable_comment">
           </textarea>
         </div>
         <div class="post_btn">
           <button  id="btn_comment" >POST
           </button>
         </div>
       </div>
       <input type="text" name="post_id" id="post_id" hidden="true" value="<?php echo $row['post_id']  ?>">

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

<br>
<?php     
}
echo "<h2 class=\"center\" style=\"margin-bottom:10px;\">No More Post Found :(</h2>";
?>

AJAX

 $(document).ready(function(){
        $("#btn_comment").click(function(){
            $.post("inc/add_comment.php" , 
            {
                comment_content:$("#comment_content").val(),
                post_id:$("#post_id").val()

            },
            function(data){
                alert("data");
            })

        });
    });
    $(document).ready(function(){
        $("#like_btn").click(function(){
             itemID = $(this).data("itemID");
            $.post("inc/like.php" , 
            {
                post_u_id:itemID

            },
            function(data){
            })

        });
    });
    $(document).ready(function(){
        $("#unlike_btn").click(function(){
            $.post("inc/unlike.php" , 
            {
                post_id:$("#post_u_id").val()


            },
            function(data){
            })

        });
    });

Like. php

    <?php 
    session_start();
    include 'db.php';
    $id=$_SESSION['c_user_id'];
        $results = mysqli_query($connect , "SELECT * FROM users WHERE id=$id");
        $row = mysqli_fetch_array($results);
        $c_user_id = $row['id'];
        $post_u_id = $_POST['post_u_id'];
        $result = mysqli_query($connect , "INSERT INTO likes (liker_id , post_id ) VALUES ('$c_user_id ', '$post_u_id')");
        echo "done";

     ?>

Answer 1

Это общая идея. Я не знаю, уловил ли я все проблемы.

Что если вместо:

if ($already_like == 1) { ?>

<button class="unlikebtn" name="unlike" id="unlike_btn">
  <span class="like_toggle">
    <svg aria-label="Unlike" class="like_ico" fill="#ed4956" height="24" viewBox="0 0 48 48" width="24">
      <path clip-rule="evenodd" d="M35.3 35.6c-9.2 8.2-9.8 8.9-11.3 8.9s-2.1-.7-11.3-8.9C6.5 30.1.5 25.6.5 17.8.5 9.9 6.4 3.5 13.7 3.5 20.8 3.5 24 8.8 24 8.8s3.2-5.3 10.3-5.3c7.3 0 13.2 6.4 13.2 14.3 0 7.8-6.1 12.3-12.2 17.8z" fill-rule="evenodd">
      </path>
    </svg>
  </span>
</button>
<input type="text" name="post_id" id="post_u_id" hidden="true" value="<?php echo $post_id ?>">
<a href="post.php?id=<?php echo $post_id?>">
  <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
    <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
    </path>
  </svg>
</a>

 <?php } elseif($already_like == 0){  ?>

   <button name="like" class="likebtn" id="like_btn" data-itemID="<?php echo $post_id?>">
     <span class="like_toggle">
       <svg aria-label="Like" class="like_ico" fill="#262626" height="24" viewBox="0 0 48 48" width="24">
         <path clip-rule="evenodd" d="M34.3 3.5C27.2 3.5 24 8.8 24 8.8s-3.2-5.3-10.3-5.3C6.4 3.5.5 9.9.5 17.8s6.1 12.4 12.2 17.8c9.2 8.2 9.8 8.9 11.3 8.9s2.1-.7 11.3-8.9c6.2-5.5 12.2-10 12.2-17.8 0-7.9-5.9-14.3-13.2-14.3zm-1 29.8c-5.4 4.8-8.3 7.5-9.3 8.1-1-.7-4.6-3.9-9.3-8.1-5.5-4.9-11.2-9-11.2-15.6 0-6.2 4.6-11.3 10.2-11.3 4.1 0 6.3 2 7.9 4.2 3.6 5.1 1.2 5.1 4.8 0 1.6-2.2 3.8-4.2 7.9-4.2 5.6 0 10.2 5.1 10.2 11.3 0 6.7-5.7 10.8-11.2 15.6z" fill-rule="evenodd">
         </path>
       </svg>
     </span>
   </button>
   <a href="post.php?id=<?php echo $post_id?>">
     <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
       <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
       </path>
     </svg>
   </a>
   <?php }  ?>

и

<div class="add_a_comment">

    <div class="add_comment_section">
      <span class="hor-line">
      </span>
      <div>
        <textarea contenteditable aria-label="Add a comment…" placeholder="Add a comment…" class="addcomment_ta" autocomplete="off" autocorrect="off" id="comment_content" name="comment_content" id="editable_comment">
        </textarea>
      </div>
      <div class="post_btn">
        <button  id="btn_comment" >POST
        </button>
      </div>
    </div>
    <input type="text" name="post_id" id="post_id" hidden="true" value="<?php echo $row['post_id']  ?>">

</div>

Мы избавимся от скрытого тега ввода он содержит $post_id и вместо этого использует его как id для кнопки:

if ($already_like == 1) { ?>

<button class="unlikebtn" name="unlike" id="<?php echo $post_id ?>">
  <span class="like_toggle">
    <svg aria-label="Unlike" class="like_ico" fill="#ed4956" height="24" viewBox="0 0 48 48" width="24">
      <path clip-rule="evenodd" d="M35.3 35.6c-9.2 8.2-9.8 8.9-11.3 8.9s-2.1-.7-11.3-8.9C6.5 30.1.5 25.6.5 17.8.5 9.9 6.4 3.5 13.7 3.5 20.8 3.5 24 8.8 24 8.8s3.2-5.3 10.3-5.3c7.3 0 13.2 6.4 13.2 14.3 0 7.8-6.1 12.3-12.2 17.8z" fill-rule="evenodd">
      </path>
    </svg>
  </span>
</button>
?>">
<a href="post.php?id=<?php echo $post_id?>">
  <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
    <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
    </path>
  </svg>
</a>

 <?php } elseif($already_like == 0){  ?>

   <button name="like" class="likebtn" id="<?php echo $post_id?>">
     <span class="like_toggle">
       <svg aria-label="Like" class="like_ico" fill="#262626" height="24" viewBox="0 0 48 48" width="24">
         <path clip-rule="evenodd" d="M34.3 3.5C27.2 3.5 24 8.8 24 8.8s-3.2-5.3-10.3-5.3C6.4 3.5.5 9.9.5 17.8s6.1 12.4 12.2 17.8c9.2 8.2 9.8 8.9 11.3 8.9s2.1-.7 11.3-8.9c6.2-5.5 12.2-10 12.2-17.8 0-7.9-5.9-14.3-13.2-14.3zm-1 29.8c-5.4 4.8-8.3 7.5-9.3 8.1-1-.7-4.6-3.9-9.3-8.1-5.5-4.9-11.2-9-11.2-15.6 0-6.2 4.6-11.3 10.2-11.3 4.1 0 6.3 2 7.9 4.2 3.6 5.1 1.2 5.1 4.8 0 1.6-2.2 3.8-4.2 7.9-4.2 5.6 0 10.2 5.1 10.2 11.3 0 6.7-5.7 10.8-11.2 15.6z" fill-rule="evenodd">
         </path>
       </svg>
     </span>
   </button>
   <a href="post.php?id=<?php echo $post_id?>">
     <svg aria-label="Comment" class="comment_ico " fill="#262626" height="24" viewBox="0 0 48 48" width="24">
       <path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd">
       </path>
     </svg>
   </a>
   <?php }  ?>

, и мы создаем форму с именем для добавления комментария, чтобы мы могли получить значение сообщения идентификатор, используя document.add_comment.post_id.value:

<div class="add_a_comment">
    <div class="add_comment_section">
      <span class="hor-line">
      </span>
      <div>
        <form name="add_comment">
          <textarea contenteditable aria-label="Add a comment…" placeholder="Add a comment…" class="addcomment_ta" autocomplete="off" autocorrect="off" id="comment_content" name="comment_content" id="editable_comment">
          </textarea>
          <div class="post_btn">
            <id="btn_comment">POST</button>
          </div>
          <input type="text" name="post_id" hidden="true" value="<?php echo $row['post_id']  ?>">
      </div>
    </div>
</div>

Тогда JavaScript становится:

$(document).ready(function(){
    $("#btn_comment").click(function(){
        $.post("inc/add_comment.php" , 
        {
            comment_content: $("#comment_content").val(),
            post_id: document.add_comment.post_id.value
        },
        function(data){
            alert("data");
        })

    });
});
$(document).ready(function() {
    $(".likebtn").click(function() {
        let post_u_id = $(this).attr('id');
        $.post("inc/like.php", 
        {
            post_u_id: post_u_id
        },
        function(data){
        })
    });
});
$(document).ready(function() {
    $(".unlikebtn").click(function() {
        let post_u_id = $(this).attr('id');
        $.post("inc/unlike.php", 
        {
            post_id: post_u_id
        },
        function(data){
        })
    });
});

Предложение

Вы используете AJAX удалять, обновлять и добавлять комментарии. Но вы пренебрегаете обновлением презентации (DOM) по возвращении из успешного вызова AJAX. Например, при успешном удалении комментария вы должны удалить комментарий из DOM. Если комментарий «не понравился», теперь он должен отображаться как комментарий, который не понравился. Поскольку вы не делаете ничего из этого, было бы лучше , а не , чтобы вообще использовать AJAX и просто вместо этого создавать формы, подобные следующим:

Вы должны реорганизовать свой HTML так что вы создаете формы для каждого комментария. Пример:

<form action="inc/unlike.php" method="post">
  <input type="hidden" name="post_id" value="<?php echo $post_id ?>">
  <button type="submit">
    <span class="like_toggle">
      <svg aria-label="Unlike" class="like_ico" fill="#ed4956" height="24" viewBox="0 0 48 48" width="24">
        <path clip-rule="evenodd" d="M35.3 35.6c-9.2 8.2-9.8 8.9-11.3 8.9s-2.1-.7-11.3-8.9C6.5 30.1.5 25.6.5 17.8.5 9.9 6.4 3.5 13.7 3.5 20.8 3.5 24 8.8 24 8.8s3.2-5.3 10.3-5.3c7.3 0 13.2 6.4 13.2 14.3 0 7.8-6.1 12.3-12.2 17.8z" fill-rule="evenodd">
        </path>
      </svg>
    </span>
  </button>
</form>

Ваш сценарий unlike.php будет завершен путем перенаправления обратно на index.php для воссоздания обновленной презентации.