PHP / MySQL / AJAX - обновить несколько данных

Question

Как обновить несколько данных с помощью AJAX?

Пример:

TableA

id: 1, 2

имя: Джек, Джон

Он работает только с идентификатором 1 , когда я пытаюсь отредактировать имя для идентификатора 2 , он не работает.

Я пытался с этим кодом, но не смог.

HTML / PHP:

...

    while($row=mysqli_fetch_array($query)){
    echo'    
    <form class="btn-group">
        <input type="text" class="form-control" name="id_user" id="id_user" data-user="'.$row['id'].'" value="'.$row['id'].'">
        <input type="text" class="form-control" name="id_status" id="id_status" data-status="'.$row['id'].'" value="'.$row['id'].'">
        <button type="submit" id="likestatus" class="btn btn-primary btn-outline btn-xs"><i class="fas fa-thumbs-up"></i></button>
        </form>
    ';
    }

AJAX:

$(document).ready(function(){
    $("#likestatus").click(function(){
    var id_user=$("#id_user").data("user");
    var id_status=$("#id_status").data("status");
        $.ajax({
        url:'status/like-status.php',
        method:'POST',
        data:{
            id_user:id_user,
            id_status:id_status
            },
            success:function(response){
            alert(response);
            }
        });
    });
});

Answer 1

Сделайте свой идентификатор уникальным, чтобы сделать его динамичным

 <?php

 $counter = 0;

 while($row=mysqli_fetch_array($query)){
    $counter++;

    echo'    
    <form class="btn-group">
        <input type="text" class="form-control" id="userid_$counter" data-user="'.$ruser['id'].'" value="'.$ruser['id'].'">
        <input type="text" class="form-control" name="id_status" id="status_$counter" data-status="'.$rtimeline['id'].'" value="'.$rtimeline['id'].'">
        <button type="submit" id="likestatus_$counter" class="btn btn-primary btn-outline btn-xs"><i class="fas fa-thumbs-up"></i></button>
        </form>
    ';
    }
?>

Тогда

<script type="text/javascript">
$(document).ready(function(){
    $('[id^="likestatus_"]').on('click',function(){
         var index = $(this).attr('id').split("_")[1];
    var id_user=$("#user_"+index).data("user");
    var id_status=$("#status_"+index).data("status");
        $.ajax({
        url:'status/like-status.php',
        method:'POST',
        data:{
            id_user:id_user,
            id_status:id_status
            },
            success:function(response){
            alert(response);
            }
        });
    });
});

Answer 2

Проблема с вашим кодом в том, что идентификаторы должны быть уникальными, но в цикле вы создаете элементы с одинаковым идентификатором.

Используйте this в обработчике событий, чтобы найти братьев и сестер по нажатой кнопке - самый близкий возвращает родителя типа формы.

$(document).ready(function(){
    $(".btn-primary").click(function(){
        var $form = $(this).closest('form');
        var id_user=$form.find('[name="id_user"]').data("user");
        var id_status=$form.find('[name="id_status"]').data("status");
            $.ajax({
            url:'status/like-status.php',
            method:'POST',
            data:{
                id_user:id_user,
                id_status:id_status
                },
                success:function(response){
                alert(response);
                }
            });
    });
});

Возможно, вы захотите использовать собственный класс вместо .btn-primary, поскольку это влияет на все кнопки на странице.

Answer 3

Вы используете идентификатор несколько раз.Таким образом, ваш запрос для var id_user=$("#id_user").data("user"); всегда находит первое поле ввода на странице.Вам не следует использовать один и тот же идентификатор несколько раз на одной странице (см. этот вопрос ).

Вы можете подписаться на jQuery submit событие формы изатем найдите поля ввода в этой форме, чтобы правильно извлечь значения id_user и status_user.Для этого вы должны добавить соответствующий слушатель события к элементу <form>.Чтобы найти форму, я бы порекомендовал добавить css-класс, такой как like-status-form.

$(document).ready(function(){
    // We're attaching a submit-event listener to every element with the css class "like-status-form"
    $(".like-status-form").submit(function(event){
       // Form get's submitted
       // Prevent that the Browser reloads the page
       event.preventDefault();

       // Extract the user id and status from the form element (=== $(this))
       var id_user = $(this).find('[name="id_user"]').data('user');
       var id_status = $(this).find('[name="id_status"]').data('status');

       // TODO Perform AJAX Call here
    });
});

. Для обнаружения элементов формы можно использовать jQuery Атрибут Equals Selector .

Найти рабочий пример на https://jsfiddle.net/07yzf8k1/

Answer 4

Судя по неполному PHP, кажется, что вы не назначаете $ruser в вашем цикле. Это будет означать, что вы всегда публикуете один и тот же идентификатор на like-status.php.

PS: написал бы как комментарий, но я не могу.