Блог

У меня есть этот сайт, который показывает пользователям, на которых я могу подписаться или нет. он работает без ajax, но он перезагружается при каждом нажатии кнопки.

Я добавил ajax, но он сохраняет только первый following_id пользователя, отображаемый первым в базе данных, и ничего больше. и это совсем не правильно. наличие длинного списка пользователей, и только один из них вставляется в базу данных.

Однако, если я нажимаю на 2 или более пользователей, чтобы подписаться, он вставляет 2 или более строк по 1 following_id вместо 2 или более строк с разными following_id, которые были нажаты.

Заранее спасибо.

мой ajax-скрипт

    $(document).ready(function() {
        $(".followUser").click(function(e) {
            e.preventDefault();
            var form = $('#userAction').serialize();
            var action = 'instant_follow.php';
     
            $.post(action, form, function(data){
              //result goes here...
            });
        });

        $('button#followResult').live('click', function(e){
            e.preventDefault();
            $button = $(this);
            if($button.hasClass('unfollow')){          
              $button.removeClass('unfollow');
              $button.text('follow');
              $button.addClass('follow');
            } else {
              $button.addClass('unfollow');
              $button.text('unfollow');
            }
        });
    });
 

мой php select формирует ту же страницу с моим ajax-скриптом

 $user = "1";
$stmt = $mysqli->prepare("SELECT * FROM site_users AS s LEFT JOIN site_follows AS f ON (f.following_id = s.user_id AND f.follower_id = ?) WHERE s.user_id != ? AND f.follow_id IS NULL ORDER BY RAND() LIMIT 7");
    $stmt->bind_param("ii", $user, $user);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo '
                <form id="userAction" action="" method="post">
                    <p>'.$row["username"].'</p>
                    <button class="followUser" id="followResult">follow</button>
                    <input type="hidden" name="following_id" value="'.$row["user_id"].'">
                </form>
            ';
        }
    } else {
        echo "no user found...";
    }
 

Мой php-запрос вставки на другой странице

 //user id which is 1
$user = "1";
$following_id = $_POST["following_id"];
$stmt = $mysqli->prepare("INSERT INTO site_follows (following_id, follower_id) VALUES (?, ?)");
    $stmt->bind_param("ii", $following_id, $user);
    $stmt->execute();
    $stmt->close();
 

Эта проблема просто потому, что вы указали один и тот же идентификатор для всей вашей формы, поэтому, какую бы кнопку вы ни нажали, будет отправлена только первая форма.Вместо этого получите значение кнопки отправки, используя $(this).closest("form").serialize() so, чтобы получить только форму, в которой была нажата кнопка.

Демонстрационный код :

 $(document).ready(function() {
  $(document).on("click", ".followUser", function(e) {
    e.preventDefault();
    $button = $(this);
    var form = $(this).closest("form").serialize();//get closest form where button is 
    console.log(form)
    var action = 'instant_follow.php';
    //your ajax
    if ($button.hasClass('unfollow')) {
      $button.addClass('follow').removeClass('unfollow');
      $button.text('follow');
    } else {
      $button.addClass('unfollow').removeClass('follow');
      $button.text('unfollow');
    }
  });


}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  <p>Abc</p>
  <button class="followUser" id="followResult">follow</button>
  <input type="hidden" name="following_id" value="1">
</form>
<form action="" method="post">
  <p>Xyz</p>
  <button class="followUser" id="followResult">follow</button>
  <input type="hidden" name="following_id" value="2">
</form>