如何允許在PHP While循環中切換Twitter Bootstrap模態

下面顯示了我的HTML & PHP對於頁面上的大多數標記（包括while循環）。它循環出sql表中的所有行，用戶應該能夠點擊圖像，並打開一個模式，以便能夠裁剪該圖像。這在頁面上的第一個項目（第一個sql行）中工作得很好，但對於所有後續的sql行，單擊後模塊不會打開。我該如何糾正或排除故障？如何允許在PHP While循環中切換Twitter Bootstrap模態

我使用的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(); 
    ?>

來源

2014-11-21 rhill45

爲什麼要設置$ id = $ data ['id']，然後直接用$ data ['title']替換該值？ – commanderZiltoid 2014-11-21 20:26:34

@nullReference錯誤，當我最小化我的代碼爲StackO。修復，謝謝 – rhill45 2014-11-21 20:36:08

試試這個。我已經移動了一些東西，並將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(); 
?>

來源

2014-11-21 20:41:45 commanderZiltoid

如何允許在PHP While循環中切換Twitter Bootstrap模態

回答

相關問題