Как открыть модальное окно с помощью bootstrap 4, щелкнув ячейку таблицы с гиперссылкой, и заполнить данные в модели из базы данных SQL с помощью идентификатора щелчка

Question

У меня есть страница, которая отображает данные из SQL в таблице, и в этой таблице одна ячейка имеет гиперссылку, и я хочу, чтобы модальный (с использованием bootstrap) открывал и извлекал данные с использованием идентификатора (значение гиперссылки) и заполнить данные о теле в модальном режиме из SQL. Я пробовал разные подходы, но ни один из них не работает. Модальное окно открывается, но не выделяется, как будто оно открывается в фоновом режиме. Пожалуйста, помогите мне с этим.

Используемые ссылки в HEAD:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>

PHP Код

<?php
while ($ticketdata = mysqli_fetch_array($ticketresults)) 
{
// Print out the contents of the entry
echo '<tbody>';
echo '<th scope="row"><a href="#" data-toggle="modal" data-target="#ticketModal'.$ticketdata['ticketnumber'].'">'; 
echo $ticketdata['ticketnumber'];
echo '</a>';
echo '</th>';
echo '<td>' . $ticketdata['policynumber'] . '</td>';
echo '<td>' . $ticketdata['registration_number'] . '</td>';
echo '<td>' . $ticketdata['insuredname'] . '</td>';
echo '<td>' . $ticketdata['contactnumber'] . '</td>';
echo '<td>' . $ticketdata['casestatus'] . '</td>';
echo '<td>';
echo '<form method="post">';
echo '<input type="hidden" name="ticketnumber" value="'. $ticketdata['ticketnumber']. '">';
echo '<input type="submit" class="btn btn-danger btn-sm" name="deletedata" value="Delete">';
echo '</form>';
echo '</td>';
echo '</tbody>';
}
?>

Как передать идентификатор в модальное окно и где следует ли инициализировать модальное окно с передачей идентификатора (гиперссылки), чтобы заполнить модальное окно данными, используя идентификатор с помощью сценария PHP?

введите описание изображения здесь

Answer 1

<table>
<?php
while($ticketdata = mysqli_fetch_array($ticketresults)){
<tr>  
   <td><a href="#" id="<?php echo $ticketdata['ticketnumber']; ?>" class="view_data" /><?php echo $ticketdata['ticketnumber']; ?></a></td>
 <td><?php echo $ticketdata['name']; ?></td> 
 <td><?php echo $ticketdata['policynumber']; ?></td> 
 <td><?php echo $ticketdata['registration_number']; ?></td> 
 <td><?php echo $ticketdata['insuredname']; ?></td> 
 <td><?php echo $ticketdata['contactnumber']; ?></td> 
 <td><?php echo $ticketdata['casestatus']; ?></td> 
 <td>DELETE</td> 
</tr>  
<?php } ?>  
</table>  
</body>  
</html>  


<div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Policy Details</h4>  
                </div>  
                <div class="modal-body" id="detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  

Ajax Код: -

<script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var ticket_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{ticket_id:ticket_id},  
                success:function(data){  
                     $('#detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  
 </script>

выберите. php: -

<?php  
 if(isset($_POST["ticket_id"]))  
 {  
      $output = '';  
      $connect = mysqli_connect("localhost", "root", "", "testing");  
      $query = "SELECT * FROM table_name WHERE id = '".$_POST["ticket_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>S. No</label></td>  
                     <td width="70%">'.$row["ticketnumber"].'</td>  
                </tr>  

                <tr>  
                     <td width="30%"><label>Ticket Name</label></td>  
                     <td width="70%">'.$row["name"].' Year</td>  
                </tr>  
                ';  
      }  
      $output .= "</table></div>";  
      echo $output;  
 }  
 ?>