最受欢迎

如何允许在 PHP While 循环中切换 Twitter Bootstrap 模式

How to allow toggling of Twitter Bootstrap modals within a PHP While loop

本文关键字：Twitter Bootstrap 模式 循环 何允许 PHP While | 更新日期: 2023-09-27

下面显示了页面上大多数标签的HTML和PHP，包括while循环。它循环出sql表中的所有行，用户应该能够单击图像，并打开一个模式来裁剪该图像。这在页面上的第一项（第一个 sql 行）中工作得很好，但对于所有后续 sql 行，模态在单击后不会打开。如何更正此问题或对其进行故障排除？

我正在使用 Twit BS 3.2.0 

        <?php 
    ob_start();
    session_start();
    require_once ('verify.php'); 
    ?>
    <head>
    <title>Edit Listings</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/cropper.min.css" rel="stylesheet">
    <link href="../css/crop-avatar.css" rel="stylesheet">
    </head>
    <body>
    <div id="container">
      <div id="head">
        <ul id="menu">
        </ul>
      </div>
      <div id="area"></div>
      <div id="main_listings">
        <h1 align="left">Edit listings page</h1>
        <?php
    include ("../dbcon2.php");
    $conn = new mysqli($servername, $username, $password, $dbname);
    $sql="SELECT * FROM listings ORDER BY date_added DESC";
    $result = $conn->query($sql);
        ?>
        <?php while ($data=mysqli_fetch_assoc($result)):
                $id = $data['id'];
                $title = $data['title'];
                $listing_img = $data['listing_img'];
        ?>
        <div id="edit_listing">
          <div id="edit_left">
            <div class="container" id="crop-avatar">
              <div class="avatar-view" title="Change the avatar"> <img src="<?php echo $listing_img; ?>" alt="<?php echo $title; ?>"> </div>
              <div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <form class="avatar-form" method="post" action="edit-avatar.php" enctype="multipart/form-data">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title" id="avatar-modal-label">Listing Main Image</h4>
                      </div>
                      <div class="modal-body">
                        <div class="avatar-body">
                          <div class="avatar-upload">
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <input name="avatar_id" type="hidden" value="<?php echo $id; ?>">
                            <label for="avatarInput">Local upload</label>
                            <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
                          </div>
                          <div class="row">
                            <div class="col-md-9">
                              <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                              <div class="avatar-preview preview-lg"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary avatar-save" type="submit">Save</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
              <div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
            </div>
          </div>
          <div id="edit_right">
            <form name="edit_date" action="edit_list.php" method="post" id="edit_list_data">
              <input name="title" type="text" id="title" tabindex="1" value="<?php echo $title; ?>" size="60" maxlength="57"/>
              <input type="hidden" name="id" value="<?php echo $id; ?>" />
              <input type="submit" formaction="edit_list.php" value="Submit" />
            </form>
          </div>
        </div>
        <?php endwhile;$conn->close();?>
        <div class="spacer"></div>
      </div>
    </div>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script src="../js/cropper.min.js"></script> 
    <script src="../js/crop-avatar.js"></script>
    </body>
    </html><?php // Flush the buffered output.
        ob_end_flush();
    ?>

试试这个。我已经移动了一些东西，并将大部分 php 放在初始 html 标记之前，并将 sql 调用的内容放入稍后用于构建图像的数组中。

<?php 
include ("../dbcon2.php");
ob_start();
session_start();
require_once ('verify.php');
$conn = new mysqli($servername, $username, $password, $dbname);
$sql="SELECT * FROM listings ORDER BY date_added DESC";
$result = $conn->query($sql);
$results = array();
while ($data = mysqli_fetch_assoc($result)){
    $results[] = array(
        'id'            =>  $data['id'];
        'title'         =>  $data['title'];
        'listing_img'   => $data['listing_img'];
    );
}
$conn->close();
?>
<html>
<head>
<title>Edit Listings</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/cropper.min.css" rel="stylesheet">
<link href="../css/crop-avatar.css" rel="stylesheet">
</head>
<body>
<div id="container">
  <div id="head">
    <ul id="menu">
    </ul>
  </div>
  <div id="area"></div>
  <div id="main_listings">
    <h1 align="left">Edit listings page</h1>
    <?php foreach($results as $row): ?>
    <div id="edit_listing">
      <div id="edit_left">
        <div class="container" id="crop-avatar">
          <div class="avatar-view" title="Change the avatar"><img src="<?php echo $row['listing_img']; ?>" alt="<?php echo $row['title']; ?>"> </div>
          <div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <form class="avatar-form" method="post" action="edit-avatar.php" enctype="multipart/form-data">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">Listing Main Image</h4>
                  </div>
                  <div class="modal-body">
                    <div class="avatar-body">
                      <div class="avatar-upload">
                        <input class="avatar-src" name="avatar_src" type="hidden">
                        <input class="avatar-data" name="avatar_data" type="hidden">
                        <input name="avatar_id" type="hidden" value="<?php echo $row['id']; ?>">
                        <label for="avatarInput">Local upload</label>
                        <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
                      </div>
                      <div class="row">
                        <div class="col-md-9">
                          <div class="avatar-wrapper"></div>
                        </div>
                        <div class="col-md-3">
                          <div class="avatar-preview preview-lg"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary avatar-save" type="submit">Save</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
        </div>
      </div>
      <div id="edit_right">
        <form name="edit_date" action="edit_list.php" method="post" id="edit_list_data">
          <input name="title" type="text" id="title" tabindex="1" value="<?php echo $row['title']; ?>" size="60" maxlength="57"/>
          <input type="hidden" name="id" value="<?php echo $row['id']; ?>" />
          <input type="submit" formaction="edit_list.php" value="Submit" />
        </form>
      </div>
    </div>
    <?php endforeach; ?>

    <div class="spacer"></div>
  </div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script src="../js/cropper.min.js"></script> 
<script src="../js/crop-avatar.js"></script>
</body>
</html>
<?php // Flush the buffered output.
    ob_end_flush();
?>
相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习