php while循环内的引导模式以显示不同的信息

Question

所以我有一个 while 循环，我正在从我的数据库中获取它们的名称和描述 因此，当我单击其中一个部件时，我希望模态显示我在模态中单击的项目的名称，我希望这张图片能更好地描述它 下面是我到目前为止的代码 在我点击模式的那一刻，无论我在哪里点击，我都会显示列表中第一个项目的名称

  while($row = mysqli_fetch_assoc($result))
    {
     $name= $row['name_of_product'];
    $description = $row['description']
   ?>
   <a href="#" data-toggle="modal" data-target="#mymodal">
                        <div class="col-sm-4">
                            <?php echo name;  ?>
                            <?php echo description ;  ?>
                        </div>
                    </a>
   <div id="mymodal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <p><?php echo $name; ?></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
<?php } ?>

Answer 1

你没有按照你必须做的方式做事。您正在为 while 循环的每次迭代重新创建 mymodal，这不是实现您想要的更好的方法。

按照以下步骤操作：

1. 在你的 while 循环之外创建你的 mymodal。

2. 将当前行的 ID 传递给 javascript 函数并使用 javascript 填充该 ID 的数据。

我已经设定了需要做的事情。试试下面的代码

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!--- display table header row-->
<table style="width:100%">
  <tr>
    <th>name</th> 
    <th>description</th>
    <th>Action</th>
  </tr>  

<?php

while($row = mysqli_fetch_assoc($result))    
      {
     $name= $row['name_of_product'];
    $description = $row['description'];
    $id = $row['id'];   // I am assuming that your table has auto incremented primary key column by the name of id, if not then replace that by $row['your_id_column']
   ?>
   

<!--- desplay the data in a table row -->
  <tr>
    <td id="<?php echo "name_".$id;  ?>"><?php echo $name;  ?></td>
    <td id="<?php echo "description_".$id;  ?>"><?php echo $description ;  ?></td>
    <td><div href="#" data-toggle="modal" data-target="#mymodal" onClick="showModal(<?php echo $id ;  ?>)">Edit</div></td> 
  </tr>
<?php } ?>
</table>  


<!--- Your modal -->
<div id="mymodal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p id="name"></p> <!--- name will be shown here-->
                <p id="description"></p><!--- description will be shown here-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
function showModal(id)
{
    // setting the values of clicked item in the bootstrap Modal
    $("#name").text($("#name_"+id).text());
    $("#description").text($("#description_"+id).text());
}
</script>

Answer 2

看起来你没有序列化模态......如果你想以这种方式做事，你的代码应该是这样的；

<!-- language-all: lang-html -->

 while($row = mysqli_fetch_assoc($result)) {
    $procuct_id =  $row['ID'];
    $name =     $row['name_of_product'];
    $description =  $row['description']
?>
   <a href="#" data-toggle="modal" data-target="#mymodal_<?php echo $procuct_id;?>">
        <div class="col-sm-4">
            <?php echo name;  ?>
            <?php echo description ;  ?>
        </div>
    </a>
   <div id="mymodal_<?php echo $procuct_id;?>" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo $name; ?></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
<?php } 
<--

更好的方法是编写一个 javascript 函数来显示通用模式窗口，然后运行 ​​ajax 调用将您的信息加载到“modal-body”div 中。您必须将唯一的 id 传递给调用，以便让您的 ajax 脚本访问数据库并获取要显示的信息。