Problem with trigger button by id ajax

Question

Problem with trigger button by id ajax

Navigation

#1 by (2 votes)

2

Well I'm here with a problem that is the following I have a lop while that shows me all users and in each has a follow button I'm doing via ajax when clicking on next change the text not to follow and the color of the button and this is working only that when I click next it puts me not follow in all that are in the while how can I solve 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

asked by anonymous 23.02.2015 / 19:08

1 answer

Error requesting Ajax (Get) AngularJS Message in JSON does not appear

score 2 · Accepted Answer

I tried to improve your source code a bit, simplifying some syntaxes for example <?php echo ?> to <?= ?> (PHP 5.4+), I changed the way I you were using the click events, so getting more dynamic, I edited your form to avoid forms with the same name and id; Please test the and report the results obtained so that we can assist in the conclusion of your question.

<?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
}
?>