使用ajax和php搜索和查看详细信息

Question

我被代码卡住了，需要你的快速响应来完成我的项目。我可以从数据库中提取所有数据，但当我点击查看按钮时，细节不会以模式形式弹出。按钮不起作用。当我从while循环中删除点击功能按钮时，它开始工作。但我希望每一行都有视图按钮，这样我就可以使用模态显示细节。有人能帮我修一下吗？

$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
$('.view_data').click(function(){  
var employee_id = $(this).attr("id");  
$.ajax({  
url:"select.php",  
method:"post",  
data:{employee_id:employee_id},  
success:function(data){  
$('#employee_detail').html(data);  
$('#dataModal').modal("show");  
}  
});  
});  

PHP:

<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "crud");
$output = '';
if(isset($_POST["query"]))
{
$search = mysqli_real_escape_string($connect, $_POST["query"]);
$query = "
SELECT * FROM records
WHERE User_ID LIKE '%".$search."%'
OR User_Name LIKE '%".$search."%' 
OR User_Email '%".$search."%' 
OR User_Age LIKE '%".$search."%' 

";
}
else
{
$query = "
SELECT * FROM records ORDER BY User_ID
";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
$output .= '
<div class="table-responsive">
<table class="table table bordered">
<tr>
<th>User ID</th>
<th>User Name</th>
<th>User Email</th>
<th>User Age</th>
<th>View</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["User_ID"].'</td>
<td>'.$row["User_Name"].'</td>
<td>'.$row["User_Email"].'</td>
<td>'.$row["User_Age"].'</td>
<td><input type="button" name="view" value="view" id="'.$row["User_ID"].'" class="btn btn-info btn-xs view_data" /></td>
</tr>
';
}
echo $output;
}
else
{
echo 'Data Not Found';
}

?>
<?php  
if(isset($_POST["employee_id"]))  
{  
$output = '';  
$connect = mysqli_connect("localhost", "root", "", "crud");  
$query = "SELECT * FROM records WHERE User_ID = '".$_POST["employee_id"]."'";  
$result = mysqli_query($connect, $query);  
$output .= '  
<div class="table-responsive">  
<table class="table table-bordered">';  
while($row = mysqli_fetch_array($result))  
{  
$output .= '  
<tr>  
<td width="30%"><label>Name</label></td>  
<td width="70%">'.$row["User_ID"].'</td>  
</tr>  
<tr>  
<td width="30%"><label>Address</label></td>  
<td width="70%">'.$row["User_Name"].'</td>  
</tr>  
<tr>  
<td width="30%"><label>Gender</label></td>  
<td width="70%">'.$row["User_Email"].'</td>  
</tr>  
<tr>  
<td width="30%"><label>Designation</label></td>  
<td width="70%">'.$row["User_Age"].'</td>  
</tr>  

';  
}  
$output .= "</table></div>";  
echo $output;  
}  
?>

Answer 1

您可以尝试更改这一行：

$('body').on('click', '.view_data', function(){
/* old:
$('.view_data').click(function(){ */

它起作用了吗？

这个想法是，在您的版本中，代码将不起作用，原因有两个：

• 当您使用新的.view_data元素更新DOM时，只有初始元素附加了此函数(您必须为新元素调用函数…(
• 当DOM中没有.view_data元素时，函数会立即运行，然后加载文档，因此当它们异步出现时，它没有效果

建议的替代方案将点击事件绑定到body，然后通过.view_data进行过滤。因此，无论DOM发生什么变化，事件都会被触发，函数也会正常工作。