[英]How can I get the data from MySQL database based on the selected ID using bootstrap and Ajax?
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. 我有两个php页面,第一个php页面包含表格,该表格选择使用Bootstrap Modal编辑哪条记录,第二个php页面处理MySQL数据库中要更新的数据。
Here is the first php page (edit_account.php) 这是第一个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">×</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页面(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>";
}
?>
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
这是
How can I target the specific ID which will be updated? 如何定位将要更新的特定ID?
Thank you in advance 先感谢您
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. 该单击从
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">×</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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.