Bdtjtk

I have an employee database from which I load employee images into a bootstrap grid. On the initial page load, I display all employees, and then I click on various buttons to change the views depending on the query.

What I'm stuck on mow is the bootstrap modal that I want to implement.

I currently have the modal appearing with an image and other information like name, work location, etc. However, the modal will only display the first image (and associated information), regardless of which image I click from the main page. My assumption is that I have to do an ajax call to reload data for the modal when I click on an image. I would do a MySQL query to select * from the database where the file = $imageURL.

I've read numerous posts, and this one seems to be what I'm looking for, although I cannot seem to figure it out: bootstrap modal does not load new data from database

This is the code I am currently working from: I've almost got everything working, except for this last part. Any help is appreciated! Thanks

<?php

 include ('db_connect.php');



 $sql = "SELECT * from monctonfir where 1 ";



 if(isset($_GET['specialty'])) $sql .= " AND specialty = '".$_GET['specialty']."' ";

 $sql .=" order by initials ASC";

 $result = $db->query($sql);



 if($result->num_rows > 0){

    while ($row = $result->fetch_assoc()){

        $imageURL = 'image/'.$row["file"];

        $initial = $row["initials"];

        $name = $row["name"];

        $location = $row["location"];



    ?>



<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Employee Profile</h5>

        <button type="button" class="close" data-dismiss="modal" aria- 

label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        <img src="<?php echo "$imageURL" ?>"/>

        <p style="text-align: right">Name: <?php echo $name ?></p>

        <p style="text-align: right">Location: <?php echo $location ?></p>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

      </div>

    </div>

  </div>

</div>



    <!-- End Modal-->   

    <div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">

    <div class="card" style="width: 6.5rem;">

    <a href = "#">

        <img id="staff" type="button" class="img card-img-top" data-toggle="modal" data-target="#exampleModal" src = "<?php echo $imageURL ?>"> 

    </a>

    <div class = "card-body">

        <h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial  ?></h5>

    </div>



    </div>

    </div>





    <?php }

 } ?>