Problem with push button by ajax id

Asked

Viewed 107 times

2

Good I’m here with a problem that and the next I have a lop while that shows me all users and in each one has a button follow I am doing via ajax by clicking on follow change the text not to follow and the color of the button and this working only that when I click on follow it puts me not follow in all that are in while how can I fix this ?

Jquery

 <script>
  $(document).ready(function(){
        $(".seguir_user").click(function() {
            var seguidores = {
               follower: $(this).closest('input#follower').val();
               followed: $(this).closest('input#followed').val();
            }
            $(this).addClass("seguir_user_click");
            $(this).text("A Seguir")
            $.ajax({
                type: "POST",
                url: "ajax/processa_seguidores.php",
                data: seguidores,
                cache: true,
                success: function(seguidores){ 
                   $("#sucesso").html("sucesso").fadeIn(400);
                   $("#sucesso").fadeOut(4000);
                }
            });
            return false;
        });
    });
</script>

HTML

$result_foodies=mysql_query("SELECT * from users_social order by id desc limit 9");
while($row_foodies=mysql_fetch_object($result_foodies)){
$result_count = mysql_query("SELECT COUNT(*) AS id FROM posts where user_id='".$row_foodies->id."'") or
die(mysql_error());
$bar = mysql_fetch_array($result_count);
?> 
<form action="" id="seguidores" name="seguidores">
<input type="hidden" id="follower" name="follower" value="<?php echo $_SESSION['user_id']; ?>">
<input type="hidden" id="followed" name="followed" value="<?php echo $row_foodies->id;  ?>">
<div class="my_account user wow fadeInLeft">
    <figure>
        <a href="users/<?php echo $row_foodies->slug; ?>"><img style=" border-top-left-radius:10px; border-top-right-radius:10px;" src="<?php echo $row_foodies->user_foto; ?>" alt="" /></a>
    </figure>
    <div class="container_user" style="border-bottom-left-radius:10px; border-bottom-right-radius:10px;">
        <p><?php echo utf8_encode(limita_caracteres($row_foodies->fb_nome, 13, false)); ?></p>
        <div style="font-family:Arial, Helvetica, sans-serif; margin-top:-15px; font-size:13px; color:#999;"><?php echo $bar['id']; ?> Opiniões</div> 
        <div style="font-family:Arial, Helvetica, sans-serif; margin:0px 0px 10px 0px; font-size:13px; color:#999;">0 Seguidores</div> 
        <?php
        if($_SESSION['FBID'] || $_SESSION['user_id']){
        ?>
           <div class="seguir_user" style="margin:0px 0px 15px 0px;">Seguir</div>
        <?php
        }
        ?>
    </div>
    </form>
</div>
<?php
}
?>
jquery ajax

  • Also add your HTML.

  • Already placed

  • $row_foodies->id contains the user id to be followed, right?

  • yes contains the id

  • I think I misunderstood your question. Your current code works and your problem is only the text that is being changed on all items with the same class?

  • yes that and the problem and this to insert in the database all that contains in while does not add only what I click on follow

  • Change your $(".seguir_user").text("Não seguir"); for $(this).text("Não seguir");, try this and enter the result

  • I changed and solved the text problem but it doesn’t add only what I clicked on Add all that are in while how can I fix it ?

  • You can add a data-id attribute for example in each user, containing your database id; Getting like this + or - <div class="seguir_user" data-id="1">Seguir</div>, then you recover at the time of passing the parameter by ajax like this: followed: $(this).data('id'), ah sorry I didn’t see you already have an input for this... try $(this).closest('input#followed').val();

  • In the div I then put a certain id="id_user" field ?

  • @Césarsousa I just edited the comment from a glance... I saw your input upstairs with the user id..., try to use what I commented and say the result $(this).closest('input#followed').val();

  • I tried that way but now the button does nothing I updated the above script to see

  • @Césarsousa I made some modifications to your code, please test and let us know the result obtained. I published it as a response;

  • tried that way but now the page does not present me the content

  • Let’s go continue this discussion in chat.

Show 10 more comments

1 answer

2


I tried to improve your source code a little by simplifying some syntax for example <?php echo ?> for <?= ?> (PHP 5.4+), I changed the way you were using the click events, so getting more dynamic, I edited your form to prevent Forms with the same name and id; please test the changes and inform the result obtained so that we can help in conclusion of your doubt.

<?php
$result_foodies = mysql_query("SELECT * FROM users_social ORDER BY id DESC LIMIT 9");
while ($row_foodies = mysql_fetch_object($result_foodies)) {
    $result_count = mysql_query("SELECT COUNT(*) AS id FROM posts WHERE user_id=$row_foodies->id") or die(mysql_error());
    $bar = mysql_fetch_array($result_count);
    ?>
<form action="#" id="seguidores_<?= row_foodies->id?>" name="seguidores_<?=row_foodies->id?>">
    <input type="hidden" id="follower" name="follower" value="<?= $_SESSION['user_id']; ?>">
    <input type="hidden" id="followed" name="followed" value="<?= $row_foodies->id; ?>">
    <div class="my_account user wow fadeInLeft">
        <figure>
            <a href="users/<?= $row_foodies->slug; ?>"><img style=" border-top-left-radius:10px; border-top-right-radius:10px;" src="<?= $row_foodies->user_foto; ?>" alt="" /></a>
        </figure>
        <div class="container_user" style="border-bottom-left-radius:10px; border-bottom-right-radius:10px;">
            <p><?php echo utf8_encode(limita_caracteres($row_foodies->fb_nome, 13, false)); ?></p>
            <div style="font-family:Arial, Helvetica, sans-serif; margin-top:-15px; font-size:13px; color:#999;"><?= $bar['id']; ?> Opiniões</div>
            <div style="font-family:Arial, Helvetica, sans-serif; margin:0px 0px 10px 0px; font-size:13px; color:#999;">0 Seguidores</div>
            <?php
    if ($_SESSION['FBID'] || $_SESSION['user_id']) {
        ?>
        <a id="seguir_user" style="margin:0px 0px 15px 0px;" href="#">Seguir</a>
    <?php
    }
    ?>
        </div>
</form>
</div>
<script>
  $(document).ready(function() {
      $(document.body).on('click', '#seguir_user', function(e) {
          e.preventDefault();
          var seguidores = {
              follower: $(this).closest('form').find('input#follower').val(),
              followed: $(this).closest('form').find('input#followed').val()
          };
          $(this).addClass("seguir_user_click");
          $(this).text("A Seguir");
          $.ajax({
              type: "POST",
              url: "ajax/processa_seguidores.php",
              data: seguidores,
              cache: true
          }).done(function( msg ) {
              $("#sucesso").html("sucesso").fadeIn(400);
              $("#sucesso").fadeOut(4000);
          });
      });
  });
</script>
<?php
}
?>

Browser other questions tagged jquery ajax

You are not signed in. Login or sign up in order to post.