How do I open modal using bootstrap 4 by clicking a hyperlinked table cell and populate data in the model from SQL database using the clicked ID

I have a page which displays data from SQL in a table and on that table one cell is hyperlinked and I want a modal (using bootstrap) to open and fetch data using the ID (the hyperlink value) and populate with data on the body in modal from SQL. I have tried different approaches but none is working well. The modal opens up but its not prominent as if its opening in background. Please help me with this.

Used Links in 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 Code

<?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>';
}
?>

How do I pass the ID to the modal and where should I initialize the modal passing the ID (hyperlink) to populate the modal with data using the ID with PHP script?

Answer

<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 Code:-

<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>

select.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;  
 }  
 ?>

Advertisement

Answer