Блог

я застрял в коде и нуждаюсь в вашем быстром ответе, чтобы закончить свой проект. Я могу извлечь все данные из базы данных, но когда я нажимаю на кнопку просмотра, детали не отображаются в модальной форме. Кнопка не работает. Когда я удаляю функциональную кнопку click из цикла while, она начинает работать. Но я хочу, чтобы кнопка просмотра была в каждой строке, чтобы я мог отображать детали с помощью modal. Может кто-нибудь, пожалуйста, помочь это исправить?

 $(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;  
     }  
     ?>
  

Вы можете попробовать изменить эту строку:

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

Сработало ли это?

Идея в том, что в вашей версии код не будет работать по двум причинам:

• когда вы обновляете DOM новыми .view_data элементами, эта функция подключается только к начальным элементам (вы должны вспомнить функцию для новых элементов …)
• ваша функция запускается сразу после загрузки документа, когда в DOM нет .view_data элементов, поэтому она не влияет, когда они появляются асинхронно

Предложенный альтернативный вариант привязывает событие щелчка к body , а затем фильтрует его по .view_data . Таким образом, независимо от того, какие изменения в DOM, событие всегда запускается и функция работает.