将PHP echo $ row数据显示为引导模式形式 [英] Displaying php echo $row data into bootstrap modal form
问题描述
我目前具有以下数据表，以显示数据库中的联系人列表.在每一行中，我还插入了一个编辑"& 删除"按钮，并通过data-id = "<?=$row['id']?>"传递给jQuery，以在单击按钮时进行处理.当单击按钮时，通过ajax，我将从getcontact.php获取数据并将其设置为模式形式的相应输入，但是数据似乎未显示在形式值中.我可以知道我哪里出了错吗?
I currently have the following datatable to display my list of contacts from the database. Each row, I have also insert a "Edit" & "Delete" button and have the data-id="<?=$row['id']?>" passed for the jQuery to handle when the button is clicked. When the button is clicked, through ajax, I will get the data from getcontact.php and set it to the respective input in the modal form, however the data does not seem to be displaying in the form values. May I know where did I go wrong?
tables.php
<table width="100%" class="display table table-striped table-bordered table-hover" id="contactsTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Company</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
<th>Gender</th>
<th>Date Registered</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result)){
?>
<tr>
<td><?=$row['id']?></td>
<td><?=$row['name']?></td>
<td><?=$row['company']?></td>
<td><?=$row['position']?></td>
<td><?=$row['phone']?></td>
<td><?=$row['email']?></td>
<td><?=$row['gender']?></td>
<td><?=$row['dateregistered']?></td>
<td>
<!-- Edit Button trigger modal -->
<button id="editButton" type="button" class="btn btn-primary" datatoggle="modal" data-target="#editModal" data-id="<?=$row['id']?>">
Edit
</button>
</td>
<td>
<!-- Delete Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="<?=$row['id']?>">
Delete
</button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
模式(与tables.php在同一页面中)
<!-- Edit Contact Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Contact</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" id="editForm" role="form">
<div class="form-group animated fadeIn">
<label for="nameInput" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="companyInput" class="col-sm-2 control-label">Company</label>
<div class="col-sm-10">
<input type="company" name="company" class="form-control" id="companyInput" placeholder="Company" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="posInput" class="col-sm-2 control-label">Position</label>
<div class="col-sm-10">
<input type="position" name="position" class="form-control" id="posInput" placeholder="Position/Job Title">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="contactInput" class="col-sm-2 control-label">Contact Number</label>
<div class="col-sm-10">
<input type="number" name="contact" class="form-control" id="contactInput" placeholder="Office/Mobile Number" data-error="Please enter a valid mobile number" required>
</div>
</div>
<div class="form-group animated fadeIn">
<label for="emailInput" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address">
</div>
</div>
<div class="form-group animated fadeIn">
<label for="genderInput" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<input type="gender" name="gender" class="form-control" id="genderInput" placeholder="Male/Female">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="editContact" type="button" class="btn btn-primary">Save</button>
</div>
</form>
</div>
jQuery
$("#editButton").click(function(e){
e.preventDefault();
var uid = $(this).data('id'); // get id of clicked row
$.ajax({
url: 'getcontact.php',
type: 'POST',
data: 'id='+uid,
dataType: 'json',
success: function(response){
$("#nameInput").val(result[0]);
$("#companyInput").val(result[1]);
$("#posInput").val(result[2]);
$("#contactInput").val(result[3]);
$("#emailInput").val(result[4]);
$("#genderInput").val(result[5]);
}
});
});
getcontact.php
<?php
include("dbconnect.php");
$id = $_POST['id'];
$result = mysqli_query($link, "SELECT * FROM businesscontact WHERE id=$id");
$rows = array();
while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}
echo json_encode($rows);
?>
推荐答案
1-您正在从php文件中发送已编码的json，并直接从您的javascript代码中使用它(可以这么说)，
1 - you are sending a encoded json from your php file and use it directly from you javascript code which is invalid so to speak,
2-您错误地使用ajax将数据对象发送到php，而应改为data: {id: uid},
2 - you are sending the data object to php using ajax wrongly, it should be as follows instead data: {id: uid},
3-您声明了错误的data-id，它应如下所示:var uid = $(this).attr('data-id');
3 - you are declare the wrong data-id , it should be as follows: var uid = $(this).attr('data-id');
您需要decode您的json响应，如下所示:
you need to decode your json response as follows:
var uid = $(this).attr('data-id');
$.ajax({
url: 'getcontact.php',
method: 'POST',
data: {id: uid},
success: function(response){
var result = JSON && JSON.parse(response) || $.parseJSON(response);
...
// rest of your code
...
更新
您在此部分中遇到了问题:
Update
and you have an issue in this part:
while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}
要添加整个数组，您需要执行以下操作:
to add the whole array you need to do as follows:
while($row = mysqli_fetch_array($result)){
$rows[] = $row;
}
这篇关于将PHP echo $ row数据显示为引导模式形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
