dongqiao3833
2019-04-29 08:46
浏览 141

如何使用bootstrap和Ajax基于所选ID从MySQL数据库获取数据?

I have two php pages, the first php page contains the table which has the selection to which record will be edited using a Bootstrap Modal, the second php page process the data to update in MySQL database.

Here is the first php page (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      

    }
}
 ?>

Second php page (edit_account_process.php): (This page will be use for updating records)

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

What's happening to my code now is that it always select the first record in my database even I tried to select other records. Here's the

error image

How can I target the specific ID which will be updated?

Thank you in advance

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongxia5394 2019-04-29 08:54
    已采纳

    You do not need to define multiple modals, use multiple scripts - as you are now doing (inside the loop, you create a new modal, and a new script).

    Instead, add one modal that you dynamically assign values to, and use one script that listens for clicks on the button. That click fetches the values you need from data-* attributes and puts them into the value of the input fields in your modal.

    <?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>
    
    点赞 评论

相关推荐 更多相似问题