Bootstrap Modal - 如何从php（数据库）提供数据

Question

This is probably very simple, but am learning PHP, Javascript as I go. I find it easier to learn using real examples than the contrived examples given online.

I am creating an attendance register page, based on selecting a class, then all members of that class ordered by Surname and Firstname.

The table row has it's id set, by PHP, as the record's mem_id, and contains just forename+" "+surname, and some checkboxes.

All this is working fine, but now I have been asked to add a link so that clicking on it brings up a modal containing related data for the person selected. The extra data is already in the $a_fetch array.

Have added a glyphicon link for every row and clicking it displays a modal alright, and by having a javascript function I know I can get the row index and row id

<tbody>
  <?php 
  while($g_fetch = $a_query->fetch_array()) {
    $checked = array();
    $memid = $g_fetch['mem_id'];
    $name = $g_fetch['firstname'].' '.$g_fetch['lastname'];
    $attendences = explode(",",$g_fetch['attend']);
    for ($x = 0; $x <= 12; $x++) {
      if ($attendences[$x]!="0") {
        $checked[$x] = 'checked = "checked"';
       }
      else $checked[$x] = '';
      } 
    echo "<tr id='".$memid."'>"; 
    echo "<td>".$name."</td>";
    echo "<td align='center'><div id='".$memid."' class='glyphicon glyphicon-info-sign' onclick='getId(this.id)' style='cursor:pointer' data-toggle='modal' data-target='#ModalCentre'></div>";
    for ($y = 0; $y <= 12; $y++) {
      echo '<td align="center"><input type="checkbox"  value = "" '.$checked[$y].'></td>';
    } 
   }     
  unset($checked);
  unset($attendences);
  ?>
  </tbody>
</table>

I am at a loss as how to proceed - is it even possible to pass data to the modal to display related data?

If it is would I need to run a new query (SELECT), or as the row is the same index as the data in the $A_fetch, and the row id has the correct mem_id is it possible to get the data from the existing $a_fetch array using either of those, or would I need to run a new SELECT?

Many thanks

Answer 1

There are multiple ways to provide data to the modal - and (in my opinion) it depends on how much data you need to pass to your modal and how many rows you have.

I want to describe you two ways:

Light+Easier Solution

If you don't want to display a lot of data and you have just a few rows. The idea is to add the data directly to each div.glyphicon (as data attributes) and then use it in the modal

In your foreach add it to your model like that:

<div id='".$memid."' class='glyphicon glyphicon-info-sign' onclick='getId(this.id)' style='cursor:pointer' data-toggle='modal' data-target='#ModalCentre' data-link='".$g_fetch['additional_link'] ."' data-moreInfo='".$g_fetch['moreInfo']."'></div>

You haven't posted the modal's HTML or your JS code, but you wrote you are using bootstrap, so stick to https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content and fetch/set the relevant data (related clicked glyphicon) as it's described.

More complex solution

For more data / more rows. The additional data is not provided in the inital loaded HTML page - Therefore not all data needs to be loaded in the beginning. Instead the additional data is loaded via ajax when clicking on one row.

For that you need to provide an additional endpoint (php) which provides the modal content for one row.

Check out second answer in Bootstrap 3 - How to load content in modal body via AJAX?

Basically you have a php file (e.g. getAdditionalData.php) In this file you access the mem_id via GET

$mem_id = $_GET['mem_id'];

fetch the additional data from database and print/render out the modal content (full html like in the second answer)

And in JS (inital page) you load the modal content onClick (fetched from php with provided mem_id as parameter)

var clicked = $(e.relatedTarget);
$(this).find(".modal-body").load("%PATH%/getAdditionalData.php?mem_id="+clicked.attr("id"));

I hope it will help you solving your problem and if you need additional infos just let me know. There are more ways to archive your goal but I think this 2 possibilities are enough in the beginning :-)