Как я могу получить данные из базы данных MySQL на основе выбранного идентификатора, используя bootstrap и Ajax?

Question

У меня есть две страницы php, первая страница php содержит таблицу, в которой есть выбор, запись которой будет редактироваться с помощью Bootstrap Modal, вторая страница php обрабатывает данные для обновления в базе данных MySQL.

Вот первая страница php (edit_account.php)

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$sql = "SELECT * FROM tblinfo";
$qry = mysqli_query($cn,$sql);
$nrows = mysqli_num_rows($qry);
if ($nrows > 0) {
    while ($rows = mysqli_fetch_array($qry)) {
        $id = $rows['userid'];
        $fn = $rows['fullname'];
?>
        <tr>
            <td><?php echo $id; ?></td>
            <td><?php echo $fn; ?></td>
            <td><a href = "#edit<?php echo $id; ?>" data-toggle = "modal" class = "btn btn-success btn-sm">Edit</a></td>
        </tr>

        <div class = "modal" id = "edit<?php echo $id; ?>">
            <div class = "modal-dialog">
                <div class = "modal-content">
                    <div class = "modal-header">
                        <h5 class = "modal-title">Edit Information</h5>
                        <button class = "close" data-dismiss = "modal">&times;</button>
                    </div>
                    <div class = "modal-body">
                        <input type = "text" id = "user_id" value = "<?php echo $id; ?>" class = "form-control" />
                        <input type = "text" id = "full_name" value = "<?php echo $fn; ?>" class = "form-control" />
                    </div>
                    <div class = "modal-footer">
                        <button class = "btn btn-primary btn-sm" id = "update<?php echo $id; ?>">Update</button>
                        <button class = "btn btn-danger btn-sm" data-dismiss = "modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $("#update<?php echo $id; ?>").click(function() {
                var id = $("#user_id").val();
                var fn = $("#full_name").val();
                if (confirm("Are you sure you want update this record?")) {
                    $.ajax({
                        url: "edit_account_process.php",
                        type: "POST",
                        data: {
                            userid: id,
                            fullname: fn
                        },
                        success: function(data) {
                            $("#showData").html(data);
                        }
                    });
                }
            });
        </script>                       
 <?php      

    }
}
 ?>

Вторая страница php (edit_account_process.php): (эта страница будет использоваться для обновления записей)

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$id = $_POST['userid'];
$fn = $_POST['fullname'];

//for Testing
echo $id . " " . $fn;

$sql = "UPDATE tblinfo SET fullname = '$fn' WHERE userid = '$id' ";
$result = mysqli_query($cn,$sql);

if ($result) {
    echo "<script>alert('Successfully updated!');</script>";
}
else {
    echo "<script>alert('Unable to update the record!');</script>";
}
?>

Что происходитмой код теперь таков: он всегда выбирает первую запись в моей базе данных, даже если я пытался выбрать другие записи.Вот

Как мне указать целевой идентификатор, который будет обновлен?

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

Answer 1

Вам не нужно определять несколько модалов, использовать несколько скриптов - как вы сейчас делаете (внутри цикла вы создаете новый модал и новый скрипт).

Вместо этого добавьте один модал, которому вы динамически присваиваете значения, и используйте один скрипт, который прослушивает щелчки на кнопке. Этот щелчок выбирает нужные вам значения из атрибутов data-* и помещает их в значения полей ввода в вашем модальном.

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$sql = "SELECT * FROM tblinfo";
$qry = mysqli_query($cn,$sql);
$nrows = mysqli_num_rows($qry);
if ($nrows > 0) {
    while ($rows = mysqli_fetch_array($qry)) {
        $id = $rows['userid'];
        $fn = $rows['fullname'];
        ?>
        <tr>
            <td><?php echo $id; ?></td>
            <td><?php echo $fn; ?></td>
            <td><a href="#" class="btn btn-success btn-sm toggleEditModal" data-uid="<?php echo $id; ?>" data-fullname="<?php echo $fn; ?>">Edit</a></td>
        </tr>                  
        <?php      
    }
}
?>

<script>
    $(".toggleEditModal").on("click", function(e) {
        e.preventDefault();
        $('#user_id').val($(this).data('uid'));
        $('#full_name').val($(this).data('fullname'));
        $("#editModal").modal('show');
    });

    $("#updateUser").click(function() {
        var id = $("#user_id").val();
        var fn = $("#full_name").val();
        if (confirm("Are you sure you want update this record?")) {
            $.ajax({
                url: "edit_account_process.php",
                type: "POST",
                data: {
                    userid: id,
                    fullname: fn
                },
                success: function(data) {
                    $("#showData").html(data);
                    $("#editModal").modal('hide');
                }
            });
        }
    });
</script>     

<div class = "modal" id = "editModal">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <h5 class = "modal-title">Edit Information</h5>
                <button class = "close" data-dismiss = "modal">&times;</button>
            </div>
            <div class = "modal-body">
                <input type = "text" id = "user_id" value = "" class = "form-control" />
                <input type = "text" id = "full_name" value = "" class = "form-control" />
            </div>
            <div class = "modal-footer">
                <button class = "btn btn-primary btn-sm" id = "updateUser">Update</button>
                <button class = "btn btn-danger btn-sm" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>