Output MySQL data in Modal

Question

I've looked for a solution to my issue and found a few using AJAX. However, they're not working for me. Is there any way to do this without AJAX? I've put together a little portal for me to view my client's information and I'm trying to output some MySQL data in an MDBootstrap Modal. Everything is functional except for the part where the modal comes in (only the first DB row comes in). Here's what I have so far.

$con=mysqli_connect("localhost","db_user","dbpass","db");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to database: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM clients");

echo "<table id='clientsInfo' class='table table-striped table-bordered table-sm cellspacing=0 width=100%'>
  <thead>
    <tr>
      <th class='th-sm'>Client
      </th>
      <th class='th-sm'>Website URL
      </th>
      <th class='th-sm'>cPanel
      </th>
      <th class='th-sm'>Webmail
      </th>
      <th class='th-sm'>Website Admin
      </th>
      <th class='th-sm'>Cloudflare
      </th>
      <th class='th-sm'>Client Info
      </th>
    </tr>
  </thead>";

while($row = mysqli_fetch_array($result))
{
echo "<tbody>";
echo "<tr>";
echo "<td>" . $row['client_name'] . "</td>";
echo "<td><a target='_blank' href='" . $row['website_url'] . "'><button type='button' class='btn blue-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['cpanel'] . "'><button type='button' class='btn peach-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['webmail'] . "'><button type='button' class='btn purple-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['web_admin'] . "'><button type='button' class='btn blue-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['cloudflare'] . "'><button type='button' class='btn peach-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><button type='button' data-toggle='modal' data-target='#fullHeightModalRight' class='btn btn purple-gradient btn-sm'>Client Info</button></td>
<!-- Client Info Modal -->
<div class='modal fade right' id='fullHeightModalRight' tabindex='-1' role='dialog' aria-labelledby='clientInfoLabel'
  aria-hidden='true'>

  <!-- Add class .modal-full-height and then add class .modal-right (or other classes from list above) to set a position to the modal -->
  <div class='modal-dialog modal-full-height modal-right' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h4 class='modal-title w-100' id='clientInfoLabel'>Hello World</h4>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
      " . $row['client_info'] . "
      </div>
      <div class='modal-footer justify-content-center'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
      </div>
    </div>
  </div>
</div>
<!-- Client Info Modal -->";
echo "</tr>";
echo "</tbody>";
}
echo "<tfoot>";
echo "<tr>";
echo "<th>Client";
echo "</th>";
echo "<th>Website URL";
echo "</th>";
echo "<th>cPanel";
echo "</th>";
echo "<th>Webmail";
echo "</th>";
echo "<th>Website Admin";
echo "</th>";
echo "<th>Cloudflare";
echo "</th>";
echo "<th>Client Info";
echo "</th>";
echo "</tr>";
echo "</tfoot>";
echo "</table>";

mysqli_close($con);
?>```

Answer 1

remove <tbody> from the loop and place it before the loop. Also put </tbody> after the loop.

Also, remove this modal from the loop and paste it before the </body> tag at the end of your HTML section.

<!-- Client Info Modal -->
<div class='modal fade right' id='fullHeightModalRight' tabindex='-1' role='dialog' aria-labelledby='clientInfoLabel'
  aria-hidden='true'>

  <!-- Add class .modal-full-height and then add class .modal-right (or other classes from list above) to set a position to the modal -->
  <div class='modal-dialog modal-full-height modal-right' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h4 class='modal-title w-100' id='clientInfoLabel'>Hello World</h4>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body' id="dynamic_contents"></div>
      <div class='modal-footer justify-content-center'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
      </div>
    </div>
  </div>
</div>
<!-- Client Info Modal -->

I have just added the id for the modal body dynamic_contents

Then add an AJAX function as specified below.

function open_modal(contents=null){
    $('#dynamic_contents').html(contents);
    $('#fullHeightModalRight').modal();
}

then for the client_info button, add a trigger for onClick as below.

echo '<td><button type="button" class="btn btn purple-gradient btn-sm" onclick="open_modal(\''.$row['client_info'].'\')">Client Info</button></td>';