How to get dynamic class of all output in a php while loop through jquery

dhruvsunoly1234 · September 17, 2018, 9:07am

i have a project in which i am fetching many output from database through a php while loop now i have a reaction column in each output now when a user clicks on react button i want it to change the value of the div related to that output only but my problem is that when i click on a react button it changes values of all the div having class of react2

this is my code

$query =  "SELECT ph.likes, 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 ";
$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'];
    $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;">
      <p><?php echo "<div><a href='users.php?id=".$users['uid']."'>
               <h3>".$users['username']."</h3>

      </div></a>"; ?></p>
</div>
</div>

  <img src="<?php echo $users['image_url']?>" alt="Avatar" style="width:682px;">

  <div class="container">
    <h4><b><?php echo "<div><a href='users.php?id=".$users['uid']."'>

      </div></a>";?></b></h4>

  </div>
 <span id="count" class="likes_count"><?php echo $users['likes']; ?> likes</span>
  <div style="padding: 2px; margin-top: 5px;">
  <?php
if (isset($_POST['liked'])) {
    $postid = $_POST['postid'];
    $result = mysqli_query($con, "SELECT * FROM photos WHERE id=$postid")or die(mysqli_error($con));
    $row = mysqli_fetch_array($result)
    or die(mysqli_error($con));
    $n = $row['likes'];

    mysqli_query($con, "INSERT INTO likes (user_id,username, post_id) VALUES ($id, '$fullname', $postid)")or die(mysqli_error($con));
    mysqli_query($con, "UPDATE photos SET likes=$n+1 WHERE id=$postid")or die(mysqli_error($con));

    echo $n+1;
    exit();
  }
  if (isset($_POST['unliked'])) {
    $postid = $_POST['postid'];
    $result = mysqli_query($con, "SELECT * FROM photos WHERE id=$postid")or die(mysqli_error($con));
    $row = mysqli_fetch_array($result)or die(mysqli_error($con));
    $n = $row['likes'];

    mysqli_query($con, "DELETE FROM likes WHERE post_id=$postid AND user_id=$id")or die(mysqli_error($con));
    mysqli_query($con, "UPDATE photos SET likes=$n-1 WHERE id=$postid")or die(mysqli_error($con));

    echo $n-1;
    exit();
  }
?>
          </div>      

      <div>

        <?php 
          // determine if user has already liked this post
           $results = mysqli_query($con, "SELECT * FROM likes WHERE user_id=$id AND post_id=".$users['id']."")or die(mysqli_error($con));

          if (mysqli_num_rows($results) == 1 ): ?>
            <!-- user already likes post -->
            <span class="unlike fas fa-heart animated bounceIn"   data-id="<?php echo $users['id']; ?>"></span> 
            <span class="like hide far fa-heart"    onclick="PlaySound()" data-id="<?php echo $users['id']; ?>"></span> 
          <?php else: ?>
            <!-- user has not yet liked post -->
            <span class="like far fa-heart"  onclick="PlaySound()" data-id="<?php echo $users['id']; ?>"></span> 
            <span class="unlike hide fas fa-heart animated bounceIn"   data-id="<?php echo $users['id']; ?>"></span> 
          <?php endif ?>
<a class="com"  style="color: #929292 !important; " href="show.php?post_id=<?php echo $users['id'];?>" style="">  <span class="glyphicon glyphicon-comment trigger" ></span>comments</a>
<div class="wink" id="ex2" style="  color: black;
    width: 30px;
    height: 30px;
    margin-top: -20px;
    margin-left: 209px;
" > <?php  
$query2 = "SELECT * FROM gormint where post_id = $pixid and user_id= $id3";
$fire2 = mysqli_query($con,$query2) or die("can not fetch data from database ".mysqli_error($con));
$query3 = "SELECT * FROM bhai where post_id = $pixid and user_id= $id3";
$fire3 = mysqli_query($con,$query3) or die("can not fetch data from database ".mysqli_error($con));
$query4 = "SELECT * FROM famer where post_id = $pixid and user_id= $id3";
$fire4 = mysqli_query($con,$query4) or die("can not fetch data from database ".mysqli_error($con));
$query5 = "SELECT * FROM muskan where post_id = $pixid and user_id= $id3";
$fire5 = mysqli_query($con,$query5) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire2)>0) {
  echo "<img src='gormint.jpg' class='gormint2' >";
}elseif (mysqli_num_rows($fire3)>0) {
  echo "<img src='bhai.jpg' class='bhai2'>";
}elseif (mysqli_num_rows($fire4)>0) {
  echo "<img src='famer.jpg' class='bhai2'>";
}elseif (mysqli_num_rows($fire5)>0) {
  echo "<img src='zakhir.jpg' class='bhai2'>";
} else{
  echo "<img src='wink.png' class='wink2'>";
}



?></div>

<div class="flipClass" id="flip">react</div>

<div class="panelClass" id="panel"> 
  <input type="image" onclick="PlaySound2()" id="display" data-value="<?php echo $users['id'];?>"  src="gormint2.jpg" class="close2 display gormint animated bounceIn " >
              <input type="image" onclick="PlaySound3()" data-value="<?php echo $users['id'];?>" id="display2" src="bhai.jpg" class="close2 display2 bhai animated bounceIn">
              <input type="image" onclick="PlaySound4()" data-value="<?php echo $users['id'];?>" id="display3" src="famer.jpg" class="close2 display3 bhai animated bounceIn">
              <input type="image" onclick="PlaySound5()" data-value="<?php echo $users['id'];?>" id="display4" src="zakhir.jpg" class="close2 display4 bhai animated bounceIn">
              </div>

        </div>
      </div>
<?php
}
}
?>

this is my script

$('.display').click(function(){
    var value=$(this).attr('data-value');
    $.ajax({url:"reaction.php?pollid="+value,cache:false,
      success:function(result){
        $('.react2').load('img.php?id=<?php echo $users['id'];?>');

    }});
}); 
  $('.display2').click(function(){
    var value=$(this).attr('data-value');
    $.ajax({url:"reaction2.php?pollid="+value,cache:false,
      success:function(result){
       $('.react2').load('bhai.php?id=<?php echo $users['id'];?>');

    }});
});
 $('.display3').click(function(){
    var value=$(this).attr('data-value');
    $.ajax({url:"reaction3.php?pollid="+value,cache:false,
      success:function(result){
   $('.react2').load('famer.php?id=<?php echo $users['id'];?>');
}});
});
 $('.display4').click(function(){
    var value=$(this).attr('data-value');
    $.ajax({url:"reaction4.php?pollid="+value,cache:false,
      success:function(result){
$('.react2').load('zakhir.php?id=<?php echo $users['id'];?>');

    }});
});

i have searched on forums there they suggested that i should use $(this) but i dont understand how to use $(this) in it plzz help me

Mittineague · September 17, 2018, 3:35pm

Hi dhruvsunoly1234 welcome to the forum

Yes, for something that on its face looks like it should be simple, the “this” keyword can sure be confusing at first.

I think reading these two articles could be of help.

Put simply, this is a referencing alias—it’s just knowing what exactly it references, that is the tricky part.

this refers to the global object in the following cases:

in the outermost context, outside of any function block

in functions that are not methods of objects

in functions that are not object constructors

When a function is called as a property on a parent object, this refers to the parent object.

When a function is called using call() or apply() , or bind() , this refers to the first argument passed to these methods. If the first argument is null or not an object, this refers to the global object.

When a function is called with the new operator, this refers to the newly created object.

When an arrow function (introduced in ECMAScript 6) is used, this relies on lexical scope and refers to the parent object.

dhruvsunoly1234 · September 18, 2018, 3:05pm

hy mittineague thnx for answering but i am kind of new to jquery so i cant understand the content in the links that you provided can you please drop code as answer plzz i really need to solve this problem plzz help me buddy

Mittineague · September 18, 2018, 8:17pm

Sorry, but I don’t see how me “dropping code” will help you solve the problem or be of any real help. IMHO, my doing so would be enabling, not helping.

I agree that reading articles with what might be obscure terminology can be inadequate when it comes to understanding what the article is saying. For me understanding often doesn’t come until I get my hands dirty trying example code and hacking at it.

Which of the example code in those articles did you have trouble with?

system · December 19, 2018, 3:17am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.