How can i show the Grid.js table inside the Modal

Question

When i clicked the button to show modal the inside of the grid.js

I try everything but the data inside grid.js is not showing in the modal, i am expecting that the data inside the grid.js it will be show inside modal

                        <td>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Issue Book</button>
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Book List</h5>
                        </div>
                        <div class="modal-body">
                        <div id="modal-table"></div>
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                        </div>
                        </div>
                        </div>
                        </td>

<script src="../jquery-3.6.4.min.js"></script>
<script src="../jquery.dataTables.min.js"></script>
<script src="../gridjs.umd.js"></script>

<script>
  function displayModal() {
    new gridjs.Grid({
      columns: ["", "Books", "ISBN No", { name: 'Category' }, { name: 'Author' }, "Location Rack"],
      data: [
        <?php
        $query = $conn->query("SELECT * FROM `books` WHERE `ID`='".$_GET['id']."';");
        if ($query->num_rows > 0) {
          while ($row = $query->fetch_assoc()) {
        ?>[gridjs.html(`
          <form action="" method="post">
            <input type="hidden" name="book_id" value="<?=$_GET['id']?>"/>
            <button type="submit" class="btn1" name="submit" value=""><i class="fas fa-edit"></i>Borrow Book</button>
          </form>
        `), gridjs.html(`<img src="data:<?=$row['image_name']?>;base64,<?=base64_encode($row['image_data'])?>" alt="" width="90" height="105" style="border: 3px solid red"><br><?php echo $row ['BKNAME'];?>`), '<?= $row['ISBNNO'] ?>', '<?= $row['CATEGORY'] ?>', '<?= $row['AUTHOR'] ?>', '<?= $row['LOCRACK'] ?>'],
        <?php
          }
        }
        ?>
      ]
    }).render(document.getElementById("modal-table"));
  }

  // Call displayModal function when the modal is shown
  $('#exampleModal').on('shown.bs.modal', function () {
    displayModal();
  });
</script>

I try everything but the data inside grid.js is not showing in the modal, i am expecting that the data inside the grid.js it will be show inside modal

Answer 1

If it's bootstrap 5+, I believe you need to put "bs" in the data attributes.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Issue Book</button>

would be

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Issue Book</button>