为啥我的 Bootstrap-Modal 不能动态加载？

Posted 2023-05-09

技术标签:

【中文标题】为啥我的 Bootstrap-Modal 不能动态加载？【英文标题】：Why does my Bootstrap-Modal not load Dynamically?为什么我的 Bootstrap-Modal 不能动态加载？ 【发布时间】：2021-05-21 10:21:39 【问题描述】：

我目前正在这里做一个小爱好项目，数据是从mysql数据库中获取然后动态显示的，这也适用于模态无法显示的例外，ID始终正确但模态简单打开没有人有任何想法或类似的东西，我读到它应该与 AJAX 一起使用，但不幸的是我不太了解我的方法。

使用了 Bootstrap 4 以及 php 7.3 和 JQuery 版本 3.3.1

提前致谢。

<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/"  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);

?>

欢迎提供进一步改进的提示。

【问题讨论】：

你在哪里声明 $offset, $no_of_records_per_page ？我想你想要LIMIT ? OFFSET ? 这实际上对这个问题并不重要，因为它是关于分页系统的。 $no_of_records_per_page = 9; $offset = ($pageno-1) * $no_of_records_per_page; id 只是数字？因为 if 就是在 id="M<?= $id ?>" 之前添加一个简单的字母 【参考方案1】：

假设 id 只是数字，这会在原点产生一个问题，实际上 id 必须是字母数字 (post)。

示例不起作用：

<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/"  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>

工作示例：

<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/"  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>

另一个技巧，改变卡片的两个IDs和模态，例如：

Card-id Modal-id

【讨论】：

以上是关于为啥我的 Bootstrap-Modal 不能动态加载？的主要内容，如果未能解决你的问题，请参考以下文章

为啥我不能用 LD_LIBRARY_PATH 覆盖动态库的搜索路径？

Bootstrap-modal Ajax弹窗传值缓存怎么清除

为啥我们不能在堆栈上分配动态内存？

为啥我不能从动态网页中抓取表格

为啥我不能在我的 jQueryUI 模式对话框中输入 TinyMCE？

为啥我不能动态分配这个结构字符串的内存？