堆栈内存溢出
  简体   繁体   English

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

[英]Why does my Bootstrap-Modal not load Dynamically?

 原文  2021-02-18 12:54:57  9   1    javascript/ php/ jquery/ mysql/ ajax

问题描述

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.我目前正在这里做一个小型爱好项目，数据将从 MySQL 数据库中获取，然后动态显示，这也适用于模态无法显示的例外，ID始终正确但模态只是没有打开有一个想法或类似的东西，我读到它应该与 AJAX 一起使用，但不幸的是我不太了解我的方法。

Bootstrap 4 as well as PHP 7.3 and JQuery version 3.3.1 are used使用引导程序 4 以及 PHP 7.3 和 JQuery 版本 3.3.1

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.欢迎提供进一步改进的提示。

1 个解决方案

解决方案1
 0 已采纳  2021-02-18 14:32:47

Assuming that id is only numeric, this creates a problem at the origin in fact id must be alphanumeric ( post ).假设 id 只是数字，这会在原点产生一个问题，事实上 id 必须是字母数字（ 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:另一个技巧，改变卡片和模态的两个IDs ，例如：

  • Card-id
  • Modal-id

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何仅在页面加载中显示一次角度引导模式？ - How to show angular bootstrap-modal on page load only once? 如何在我的情况下更改引导程序模式宽度？ - How Can I change bootstrap-modal width in my situation? Bootstrap-Modal，模态无法正常工作 - Bootstrap-Modal, Modal not working properly 无法在Bootstrap-Modal中加载Google Map图块 - Google Map tiles not loading in Bootstrap-Modal 使用bootstrap-modal modalOverflow检测滚动事件？ - Detect scroll events with bootstrap-modal modalOverflow? 图表不显示在引导模式内 - chart not display inside a bootstrap-modal 在javascript中从字符串创建bootstrap-modal - Create bootstrap-modal from string in javascript bootstrap-modal不显示对话框 - bootstrap-modal doesn't show the dialog 为什么我的模态不起作用？ 引导程序4 - Why does my modal not work? Bootstrap4 为什么我的引导模式弹出窗口没有关闭？ - Why does my bootstrap modal popup not close?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM