MySQLからブートストラップ・モーダル（no ajax）にデータを表示

Question

私のページには、いくつかの情報を持つショップのリストがあります。各店舗には、店舗に関するすべての情報を表示するモーダルを開くボタンがあります。

モーダルを入れてリストを生成し、最初の結果がモーダルに正しく表示されますが、2番目、3番目などをクリックすると、最初の情報が表示されます（今私は店の名前だけで試しました）。なぜか分からない。

各店舗で情報を表示することはできますか？ ajaxを使用することは必須ですか？

私はこの質問をHow can i show data into bootstrap panel dynamically by javascript?にチェックしましたが、それは私を助けませんでした。うまくいけば、私は問題を正しく説明してきた

<?php 
    echo'<section class="col-xs-12 col-sm-6 col-md-12">'; 
    $sql = "SELECT nome_L, tipocucina_TC, wifi_L, tipolocale_TL, descrizione_L, indirizzo_L, fasciaprezzo_L, convenzione_L, image_thumb_L FROM locale l 
      JOIN tipocucina c On l.TipoCucina_L = c.IDtipocucina_TC 
      JOIN tipolocale t On l.TipoLocale_L = t.IDTipolocale_TL 
      WHERE TRUE"; 

    $result = mysqli_query($conn,$sql) or die(mysqli_error($conn)); 

    while($row = mysqli_fetch_array($result)) 
    { 
     $nome_Local = $row['nome_L']; 
     $descrizione_Local = $row['descrizione_L']; 
     $indirizzo_Local = $row['indirizzo_L']; 
     $tipocucina_Local = $row['tipocucina_TC']; 
     $tipolocale_Local = $row['tipolocale_TL']; 
     $immagine_Local = $row['image_thumb_L']; 

     //START MODAL 
     echo' 
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
          <h4 class="modal-title" id="myModalLabel">'.$nome_Local.'</h4> 
         </div> 
         <div class="modal-body"> 
         ... 
         </div> 
         <div class="modal-footer"> 

         </div> 
        </div> 
       </div> 
      </div> 
     '; 
     //END MODAL 

     echo'<article class="search-result row"> 
       <div class="col-xs-12 col-sm-12 col-md-3"> 
        <a href="#" title="Lorem ipsum" class="thumbnail"><img src="images/locals/'.$immagine_Local.'"/></a> 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-2" style="width: 18%;"> 
        <ul class="meta-search"> 
         <li><i class="fa fa-cutlery fa-lg"></i> <span>'.$tipocucina_Local.'</span></li> 
         <li><i class="fa fa-coffee fa-lg"></i> <span>'.$tipolocale_Local.'</span></li> 
        </ul> 
       </div> 

       <div class="col-xs-12 col-sm-12 col-md-7 excerpet" style="width: 55%;">'; 
        echo"<h3><a>".$nome_Local."</a></h3>"; 
        echo'<i class="fa fa-compass"> </i>'.$indirizzo_Local.'</i>'; 
        echo"<br>"; 
        echo'<p class="local-description">'.$descrizione_Local.'</p>'; 

        //BUTTON THAT OPEN MY MODAL 
        echo'<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Show more </button>'; 
        echo' 
       </div> 
       <span class="clearfix borda"></span> 
      </article>'; 
    }    
    $conn->close(); 
?> 

：

この

は私のリストを生成し、PHP、モーダルを開くボタン、およびモーダルとのコードです。

Answer 1

誰かがコメントしたように、あなたはすべてのモーダルに同じIDを与え、すべてのボタンに同じターゲットを与えます。あなたはそれらにユニークなものを与える必要があります。 whileループの直前にカウンタを宣言します。たとえば、$i = 0です。

$i = 0; 
while (... 

変更：

<div class="modal fade" id="myModal_<? echo $i; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

とから、ボタンを変更します：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

へ

echo'<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Show more </button>'; 

へ：

echo'<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal_' .$i .'"> Show more </button>'; 

とあなたのwhileループが$i++を使用して、閉じる前$iをインクリメント：

... 
    $i++; 
}