while loop shows only the last row in database when click at button[to display modal dialog]

Question

I am facing a problem in a modal dialog. when the user click at "File", the modal dialog will appear and will show data that fetch from database.

<?php echo '<table>'; ?>
              <tr>
                <th>
                Name
              </th>
              <th>
                File
              </th>
            </tr>

$query = "SELECT * FROM table";
              $result = mysqli_query($conn, $query);

              if (mysqli_num_rows($result) != 0) {
                while($row = mysqli_fetch_array($result)) {
                  $stu_file=$row['file_upload'];
                  $ins_file=$row['files_uploads'];
                  $name = $row['name'];
                  echo "<tr>";
                  echo "<td>" .$name. "</td>";
                  echo "<td><a href='#' data-toggle='modal' data-target='#myModal'>File</a></td>";//code this

                  echo "</tr>";
                }
             }else{
                echo "No data has been done yet!!";
             }
             ?>
              <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Student File</h4>
              </div>
              <div class="modal-body">
                 <?php echo"<pre>".$stu_file."</pre>"?>
              </div>
              <div class="modal-header">
                <h4 class="modal-title">Instructor File</h4>
              </div>
              <div class="modal-body">
                 <?php echo"<pre>".$ins_file."</pre>"?>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
        <!-- End Modal-->

as you see the code above, when I click at file, the modal dialog display but the $stu_file will show only the last row from database. When I moved the modal dialog inside the while loop, it shows only the first row from database. please help to fix this.

Answer 1

The variables $stu_file and $ins_file are going to be overwritten with each iteration of your loop. So that by the time you get to the end of the loop and print the modal dialogue, the value of those variables is whatever the last row was in your loop. Additionally, you only have one modal dialogue so your approach doesn't work here.

Instead, it might be easier for you to just print the data fetched from your database as a JSON object in <script> tags and use javascript to populate the modal dialogue with the necessary information.

For example you can print out the JSON using something like this...

$data = [];
while($row = mysqli_fetch_array($result)) {
    $data[] = $row;
}
echo "<script> var myData = " . json_encode($data) . "; </script>";

Now you can also populate your links with a data-id attribute to correspond to the given id or PK in your database, like echo "<a href='#' data-toggle='modal' data-target='#myModal' data-id='{$row['id']}'>File</a>" in your loop, and that way you can use that in your modal's .on('show.bs.modal') callback to load the appropriate data from your JSON array.

See the bootstrap documentation for how to use the modal callback. It should be something like...

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var dataId = button.data('id') // Extract info from data-* attributes
  // Now you can get the data form your JSON object
  var info = myData[dataId]; // or however you set it up
  var modal = $(this);
  modal.find('.modal-title').text('New message to ' + info);
})