How to retrieve informations about specific client in modal - PHP/MySQL

Admin 1
Viewed 74

I have a table of all clients retrieved from database - I would like to click on each name in table and get the information about that specific client I clicked on in modal, right now my solution is that information are on another page by using client's id

<td >
    <a href = "Client-Detail.php?client_id=<?php echo $fetch['client_id']?>">
        <?php echo $fetch['firstName']." ".$fetch['lastName']?>
    </a>
</td>

For making a modal I am using Bootstrap 5:

<td data-bs-toggle="modal" data-bs-target="#clientModal">
    <?php echo $fetch['firstName']." ".$fetch['lastName']?>
</td>


<div class="modal fade" id="clientModal" tabindex="-1" aria-labelledby="clientModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          SPECIFIC CLIENT INFO
        </div>
      </div>
   </div>
</div>

My question is, how to implement retrieving the right info through client's id in modal and not another-new page ?

bootstrap-modal php javascript
1 Answers

Assuming you have made the right query and all is working well, then you do this.

First make your link tag a class of "quick_look" or something of good reference

         <a data-href = "Client-Detail.php?client_id=<?php echo $fetch['client_id']?>" class="quick_look">
         <?php echo $fetch['firstName']." ".$fetch['lastName']?>
         </a>

Then add this jQuery code to the same file that has the link tag.

       <script>

       $(".quick_look").on("click", function() {
          var dataURL = $(this).attr( "data-href" );
        
        $('.modal-body').load(dataURL, function(){ $('#clientModal').modal({show:true}); 
        });


       });


     </script>

You must have bootstrap and jQuery links in your project for this to work out.

To add to this... It's best if the code and the div that fetches the client's info is in another page as a whole..

You can have the above script in the footer section of your php file, so you can call the modal from anywhere that has the "quick_look" class.

Note that the div in the other page is what is being loaded and shown in the Modal div of class "modal-body"

user_118817580
Related