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

如何解决使用ajax和php搜索和查看详细信息

我被困在代码中，需要您的快速响应才能完成我的项目。我能够从数据库中提取所有数据，但是当我单击查看按钮时，详细信息不会以模式形式弹出。该按钮不起作用。当我从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","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;  
     }  
     ?>

解决方法

您可以尝试更改此行：

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

它起作用了吗？

想法是，在您的版本中，代码由于以下两个原因而无法工作：

• 当您使用新的.view_data元素更新DOM时，只有初始元素具有此功能（您必须调用新元素的功能...）
• 当DOM中没有.view_data元素时，您的函数会立即运行，然后加载文档-因此，当它们异步出现时，它没有任何作用

建议的替代方法是将点击事件绑定到body，然后按.view_data对其进行过滤。因此，无论DOM中发生什么变化，事件始终会被触发并且该功能可以正常工作。