Why does my Bootstrap-Modal not load Dynamically?

Question

I am currently working on a small hobby project here, data is to be taken from a MySQL database and then displayed dynamically, this also works with the exception that the modal cannot be displayed, the ID is always correct but the modal simply opens no one has an idea or something like that, I read that it should work with AJAX but unfortunately I don't know my way around that well.

Bootstrap 4 as well as PHP 7.3 and JQuery version 3.3.1 are used

Thanks in advance.

<head>
  <title>TITLE</title>
  <link rel="icon" href="image/fav.png" type="image/png" sizes="16x16">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="styles/start.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<?php

$sql = "SELECT item_list.id AS itemID, category_list.category_name, item_multilang.text_". $_SESSION['lang'] ." AS lang, lagacy_item_id, last_update, price, category_id FROM item_list
LEFT JOIN category_list ON category_list.id = item_list.category_id
LEFT JOIN item_multilang ON item_multilang.id = item_list.id WHERE category_list.category_name = 'Stone' LIMIT $offset, $no_of_records_per_page";
$res_data = mysqli_query($conn,$sql);
while($row = mysqli_fetch_array($res_data))
{

  $id = $row['itemID'];

?>
      <div>
        <div class="card" style="width: 20rem; border: 3px solid black; background-color: #151f38; margin: 10px" id="<?= $row['lagacy_item_id']; ?>">
            <br>
            <img class="card-img-top" style="width:160px; height:160px; margin: 20px" src="/image/stone/" alt="Card image" style="width:100%">
            <div class="card-body">
                <h4 class="card-title" style="text-align: center; color: #bdbdbd; font-family: arial"><?= $row["lang"]; ?></h4>
                <h5 style="text-align: center; color: #bdbdbd; font-family: arial"><?= $row["price"]; ?> Mark</h5>
                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#<?= $id ?>">View</button>
            </div>
        </div>
        <br>
        <!-- Modal -->
        <div id="<?= $id ?>" class="modal fade" role="dialog">
                <div class="modal-dialog">
                  <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Details</h4>
                      </div>
                      <div class="modal-body">
                            <h3>Name : <?php echo $row['lang']; ?></h3>
                      </div>
                    </div>
                </div>
            </div>
      </div>
<?php
}

mysqli_close($conn);

?>

Tips for further improvements are Welcome.

Where you declere `$offset, $no_of_records_per_page` ? And i think you want `LIMIT ? OFFSET ?` — Simone Rossaini, Feb 18 '21 at 12:56
This is actually not important for this question because it is about a pagination system. ```$no_of_records_per_page = 9; $offset = ($pageno-1) * $no_of_records_per_page;``` — Christoph Flessner, Feb 18 '21 at 13:21
id is only numeric? because if is that add a simple letter before like `id="M= $id ?>"` — Simone Rossaini, Feb 18 '21 at 14:22

score 0 · Accepted Answer · answered Feb 18 '21 at 14:32

Assuming that id is only numeric, this creates a problem at the origin in fact id must be alphanumeric (post).

Example not work:

<head>
  <title>TITLE</title>
  <link rel="icon" href="image/fav.png" type="image/png" sizes="16x16">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="styles/start.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

      <div>
        <div class="card" style="width: 20rem; border: 3px solid black; background-color: #151f38; margin: 10px" id="2">
            <br>
            <img class="card-img-top" style="width:160px; height:160px; margin: 20px" src="/image/stone/" alt="Card image" style="width:100%">
            <div class="card-body">
                <h4 class="card-title" style="text-align: center; color: #bdbdbd; font-family: arial"><?= $row["lang"]; ?></h4>
                <h5 style="text-align: center; color: #bdbdbd; font-family: arial"><?= $row["price"]; ?> Mark</h5>
                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#1">View</button>
            </div>
        </div>
        <br>
        <!-- Modal -->
        <div id="1" class="modal fade" role="dialog">
                <div class="modal-dialog">
                  <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Details</h4>
                      </div>
                      <div class="modal-body">
                            <h3>Name : <?php echo $row['lang']; ?></h3>
                      </div>
                    </div>
                </div>
            </div>
      </div>

Working example:

<head>
  <title>TITLE</title>
  <link rel="icon" href="image/fav.png" type="image/png" sizes="16x16">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="styles/start.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

      <div>
        <div class="card" style="width: 20rem; border: 3px solid black; background-color: #151f38; margin: 10px" id="Card-1">
            <br>
            <img class="card-img-top" style="width:160px; height:160px; margin: 20px" src="/image/stone/" alt="Card image" style="width:100%">
            <div class="card-body">
                <h4 class="card-title" style="text-align: center; color: #bdbdbd; font-family: arial"><?= $row["lang"]; ?></h4>
                <h5 style="text-align: center; color: #bdbdbd; font-family: arial"><?= $row["price"]; ?> Mark</h5>
                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#Modal-1">View</button>
            </div>
        </div>
        <br>
        <!-- Modal -->
        <div id="Modal-1" class="modal fade" role="dialog">
                <div class="modal-dialog">
                  <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Details</h4>
                      </div>
                      <div class="modal-body">
                            <h3>Name : <?php echo $row['lang']; ?></h3>
                      </div>
                    </div>
                </div>
            </div>
      </div>

Another trick, change the two IDs of the card and the modal as I did for example:

Card-id
Modal-id

Why does my Bootstrap-Modal not load Dynamically?

1 Answers1