2016-06-20 13 views
0

Bootstrapモデルとhtml table詳細ボタン付きで作業しています。現在のシナリオは、私はちょうどデータベースからフェッチされたデータを持つテーブルにデータを表示しています。 画面は、私はちょうどデータの最初のエントリだけを示している。このリストにあるいずれかのボタンをクリックしたとき、私はちょうど詳細ボタンでBootstrepモデルを実装 enter image description hereループ中のPHPデータのブートストラップモデル

を撃ちました。たとえば、3番目のボタンをクリックすると、モデルは最初のボタン入力データを表示します。

これは私のコード

<?php 
include_once("..\connection.php"); 
if(isset($_GET['q'])){ 
    $q = ($_GET['q']); 

    $sql="SELECT * FROM propertytable WHERE property_name like '%".$q."%' OR property_desc like '%".$q."%' OR property_type like '%".$q."%' OR property_sub_type like '%".$q."%' OR property_service like '%".$q."%' OR propert_location like '%".$q."%'"; 
    $result = mysqli_query($conn,$sql); 
}else 
{ 
    $type = ($_GET['type']); 
    $sub_Type = ($_GET['subType']); 
    $property_service = ($_GET['propertyService']); 
    $property_location = ($_GET['propertyLocation']); 
    $start_Prize = ($_GET['startPrize']); 
    $end_Prize = ($_GET['endPrize']); 
    //echo $property_service; exit; 
    include_once("..\connection.php"); 
    $sql="SELECT * FROM propertytable WHERE property_name like '%".$type."%' OR property_sub_type like '%".$sub_Type."%'"; 
    if($property_service !="" && $property_service!="Select Property Service") 
     $sql.=" AND property_service like '%".$property_service."%'"; 
    if($property_location!="") 
     $sql.=" AND property_location like '%".$property_location."%'"; 
    if($start_Prize!="" AND $end_Prize!="") 
     $sql.= " AND property_prize between '".$start_Prize."' AND '".$end_Prize."' "; 

    $result = mysqli_query($conn,$sql); 
} 
echo "<br>"; 
echo "<div class='container'>"; 
echo "<table border='0' align='center' cellspacing='10' id='mytable'>"; 
$i=1; 
while($row = mysqli_fetch_array($result)) { 
     echo "<tr><td><img src='..\\".$row['image_front']."' style='width:150px; height:150px; vertical-align: text-top'></td> 
       <td valign='top'><span style='font-weight:bold; margin-top:10cm '>Name:&nbsp;&nbsp;</span>".$row['property_name']."<br /><br /> 
       <span style='font-weight:bold; '>Description:&nbsp;&nbsp;</span>".$row['property_desc']."<br /><br /> 
       <span style='font-weight:bold; '>Property Type:&nbsp;&nbsp;</span>".$row['property_type']."<br /><br /> 
       <span style='font-weight:bold; '>Property Sub Type:&nbsp;&nbsp;</span>".$row['property_sub_type']."<br /><br /> 
       <div style='float: right; text-align: right; width: 50%;'> 
       <button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal' id='modelbutton'> 
       Details 
       </button> 
       </div> 
       <div class='modal fade' id='myModal".$i."' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'> 
       <div class='modal-dialog' role='document'> 
        <div class='modal-content'> 
        <div class='modal-header'> 
         <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button> 
         <h4 class='modal-title' id='myModalLabel'> Property Details</h4> 
        </div> 
        <div class='modal-body'> 


        <div id='myCarousel' class='carousel slide' data-ride='carousel'> 
        <ol class='carousel-indicators'> 
         <li data-target='#myCarousel' data-slide-to='0' class='active'></li> 
         <li data-target='#myCarousel' data-slide-to='1'></li> 
         <li data-target='#myCarousel' data-slide-to='2'></li> 
         </ol> 

        <div class='carousel-inner' role='listbox'> 
         <div class='item'> 
         <img src='..\\".$row['image_front']."' alt='property_front'> 
         </div> 
         <div class='item'> 
         <img src='..\\".$row['image_side']."' 
         alt='property_side'> 
         </div> 
         <div class='item active'> 
         <img src='..\\".$row['image_back']."' 
         alt='property_back'> 
         </div> 
         </div> 
        </div> 
        <a class='left carousel-control' href='#myCarousel' role='button' data-slide='prev'> 
        <span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span> 
        <span class='sr-only'>Previous</span> 
        </a> 
        <a class='right carousel-control' href='#myCarousel' role='button' data-slide='next'> 
        <span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span> 
        <span class='sr-only'>Next</span> 
        </a> 


        </div> 
        <span style='font-weight:bold; '>Property Service:&nbsp;&nbsp;</span>".$row['property_name']."<br /><br /> 
        <span style='font-weight:bold; '>Property Size:&nbsp;&nbsp;</span>".$row['property_size']."<br /><br /> 
        <span style='font-weight:bold; '>Property Location:&nbsp;&nbsp;</span>".$row['propert_location']."<br /> 

        <div class='modal-footer'> 
         <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> 
        </div> 
        </div> 
       </div> 
       </div>"; 
       $i++; 
} 

echo "</table>"; 
mysqli_close($conn); 
?> 

でこれを行うにはどのような方法を提案してください。

+0

ボタンをクリックし、その行のIDを渡し、IDに基づいて、モデルにAJAXと負荷を使用してdatabseからレコードを取得.. –

+2

はあなたのクエリをエコーし​​てみましたか?クエリでデータが正しく設定されているかどうかを確認します。 – Bhavin

+0

私はidを渡す方法を知らないbeacuse私はidフィールドを 'database'に持っていません。例を挙げてください。 – viratpuar

答えて

0

私はちょうど私はしばらくの間、ループの外でモーダルを置く別のway.Firstに私の問題を解決しました。そしてwhileループのボタン

モーダルトリガーボタンのPHPコード。 whileループ

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

<?php 
include_once("..\connection.php"); 
    $sql="SELECT * FROM propertytable"; 
    $result = mysqli_query($conn,$sql); 
    while($row = mysqli_fetch_array($result)) { 
    echo "<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-id='".$row['id']."' data-target='#myModal'> 
    Launch demo modal 
</button>"; 
} 

は外のモーダルを入れモーダルが示されているとき、これは、AJAXコード実行されます。

<script> 
$(document).ready(function(){ 
    $('#myModal').on('show.bs.modal', function (e) { 
     var rowid = $(e.relatedTarget).data('id'); 
     $.ajax({ 
      type : 'get', 
      url : 'info.php', //Here you will fetch records 
      data : 'id='+ rowid, //Pass $id 
      success : function(data){ 
      $('.modal-body').html(data);//Show fetched data from database 
      } 
     }); 
    }); 
}); 
</script> 
0

親切にあなたがそれに役立つことを願って、データ・ターゲットを変更する必要が

<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal".$i."' id='modelbutton'> 
0
<?php 
include_once("..\connection.php"); 
if(isset($_GET['q'])){ 
    $q = ($_GET['q']); 

    $sql="SELECT * FROM propertytable WHERE property_name like '%".$q."%' OR property_desc like '%".$q."%' OR property_type like '%".$q."%' OR property_sub_type like '%".$q."%' OR property_service like '%".$q."%' OR propert_location like '%".$q."%'"; 
    $result = mysqli_query($conn,$sql); 
}else 
{ 
    $type = ($_GET['type']); 
    $sub_Type = ($_GET['subType']); 
    $property_service = ($_GET['propertyService']); 
    $property_location = ($_GET['propertyLocation']); 
    $start_Prize = ($_GET['startPrize']); 
    $end_Prize = ($_GET['endPrize']); 
    //echo $property_service; exit; 
    include_once("..\connection.php"); 
    $sql="SELECT * FROM propertytable WHERE property_name like '%".$type."%' OR property_sub_type like '%".$sub_Type."%'"; 
    if($property_service !="" && $property_service!="Select Property Service") 
     $sql.=" AND property_service like '%".$property_service."%'"; 
    if($property_location!="") 
     $sql.=" AND property_location like '%".$property_location."%'"; 
    if($start_Prize!="" AND $end_Prize!="") 
     $sql.= " AND property_prize between '".$start_Prize."' AND '".$end_Prize."' "; 

    $result = mysqli_query($conn,$sql); 
} 
echo "<br>"; 
echo "<div class='container'>"; 
echo "<table border='0' align='center' cellspacing='10' id='mytable'>"; 
$i=1; 
while($row = mysqli_fetch_array($result)) { 
     echo "<tr><td><img src='..\\".$row['image_front']."' style='width:150px; height:150px; vertical-align: text-top'></td> 
       <td valign='top'><span style='font-weight:bold; margin-top:10cm '>Name:&nbsp;&nbsp;</span>".$row['property_name']."<br /><br /> 
       <span style='font-weight:bold; '>Description:&nbsp;&nbsp;</span>".$row['property_desc']."<br /><br /> 
       <span style='font-weight:bold; '>Property Type:&nbsp;&nbsp;</span>".$row['property_type']."<br /><br /> 
       <span style='font-weight:bold; '>Property Sub Type:&nbsp;&nbsp;</span>".$row['property_sub_type']."<br /><br /> 
       <div style='float: right; text-align: right; width: 50%;'> 
       <button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal".$i."' id='modelbutton'> 
       Details 
       </button> 
       </div> 
       <div class='modal fade' id='myModal".$i."' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'> 
       <div class='modal-dialog' role='document'> 
        <div class='modal-content'> 
        <div class='modal-header'> 
         <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button> 
         <h4 class='modal-title' id='myModalLabel'> Property Details</h4> 
        </div> 
        <div class='modal-body'> 


        <div id='myCarousel' class='carousel slide' data-ride='carousel'> 
        <ol class='carousel-indicators'> 
         <li data-target='#myCarousel' data-slide-to='0' class='active'></li> 
         <li data-target='#myCarousel' data-slide-to='1'></li> 
         <li data-target='#myCarousel' data-slide-to='2'></li> 
         </ol> 

        <div class='carousel-inner' role='listbox'> 
         <div class='item'> 
         <img src='..\\".$row['image_front']."' alt='property_front'> 
         </div> 
         <div class='item'> 
         <img src='..\\".$row['image_side']."' 
         alt='property_side'> 
         </div> 
         <div class='item active'> 
         <img src='..\\".$row['image_back']."' 
         alt='property_back'> 
         </div> 
         </div> 
        </div> 
        <a class='left carousel-control' href='#myCarousel' role='button' data-slide='prev'> 
        <span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span> 
        <span class='sr-only'>Previous</span> 
        </a> 
        <a class='right carousel-control' href='#myCarousel' role='button' data-slide='next'> 
        <span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span> 
        <span class='sr-only'>Next</span> 
        </a> 


        </div> 
        <span style='font-weight:bold; '>Property Service:&nbsp;&nbsp;</span>".$row['property_name']."<br /><br /> 
        <span style='font-weight:bold; '>Property Size:&nbsp;&nbsp;</span>".$row['property_size']."<br /><br /> 
        <span style='font-weight:bold; '>Property Location:&nbsp;&nbsp;</span>".$row['propert_location']."<br /> 

        <div class='modal-footer'> 
         <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> 
        </div> 
        </div> 
       </div> 
       </div>"; 
       $i++; 
} 

echo "</table>"; 
mysqli_close($conn); 
?> 

によく

<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal' id='modelbutton'> 

ように、データターゲットを動的に。

注:SQLインジェクションに

+0

既に試しました。あなたは私のコードを確認することができます – viratpuar

0

を避けるために、PDOを使用し、mysqliのか、MySQLを使用していないあなたのwhileループは、次のようになります。

while($row = mysqli_fetch_array($result)) { 
     echo "<tr><td><img src='..\\".$row['image_front']."' style='width:150px; height:150px; vertical-align: text-top'></td> 
       ....... 
       ....... 
       ....... 
       <button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal' id='modelbutton'> 
       Details 
       </button> 
       ....... 
       ....... 
       ....... 
       </div>"; 
       $i++; 
} 

だから私はここで見つける3つの主要な問題がありますされています

  1. echoステートメントで行のtrタグを閉じることができません。
  2. echoステートメントの2番目の列にtdタグがありません。
  3. ボタンのデータターゲット属性よりも動的なデータを生成すると、モデルによって動的ではありません。

ので、このコードを試してください。

while($row = mysqli_fetch_array($result)) { 
     echo "<tr><td><img src='..\\".$row['image_front']."' style='width:150px; height:150px; vertical-align: text-top'></td> 
       <td valign='top'><span style='font-weight:bold; margin-top:10cm '>Name:&nbsp;&nbsp;</span>".$row['property_name']."<br /><br /> 
       <span style='font-weight:bold; '>Description:&nbsp;&nbsp;</span>".$row['property_desc']."<br /><br /> 
       <span style='font-weight:bold; '>Property Type:&nbsp;&nbsp;</span>".$row['property_type']."<br /><br /> 
       <span style='font-weight:bold; '>Property Sub Type:&nbsp;&nbsp;</span>".$row['property_sub_type']."<br /><br /> 
       <div style='float: right; text-align: right; width: 50%;'> 
       <button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal".$i."' id='modelbutton'> 
       Details 
       </button> 
       </div> 
       <div class='modal fade' id='myModal".$i."' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'> 
       <div class='modal-dialog' role='document'> 
        <div class='modal-content'> 
        <div class='modal-header'> 
         <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button> 
         <h4 class='modal-title' id='myModalLabel'> Property Details</h4> 
        </div> 
        <div class='modal-body'> 


        <div id='myCarousel' class='carousel slide' data-ride='carousel'> 
        <ol class='carousel-indicators'> 
         <li data-target='#myCarousel' data-slide-to='0' class='active'></li> 
         <li data-target='#myCarousel' data-slide-to='1'></li> 
         <li data-target='#myCarousel' data-slide-to='2'></li> 
         </ol> 

        <div class='carousel-inner' role='listbox'> 
         <div class='item'> 
         <img src='..\\".$row['image_front']."' alt='property_front'> 
         </div> 
         <div class='item'> 
         <img src='..\\".$row['image_side']."' 
         alt='property_side'> 
         </div> 
         <div class='item active'> 
         <img src='..\\".$row['image_back']."' 
         alt='property_back'> 
         </div> 
         </div> 
        </div> 
        <a class='left carousel-control' href='#myCarousel' role='button' data-slide='prev'> 
        <span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span> 
        <span class='sr-only'>Previous</span> 
        </a> 
        <a class='right carousel-control' href='#myCarousel' role='button' data-slide='next'> 
        <span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span> 
        <span class='sr-only'>Next</span> 
        </a> 


        </div> 
        <span style='font-weight:bold; '>Property Service:&nbsp;&nbsp;</span>".$row['property_name']."<br /><br /> 
        <span style='font-weight:bold; '>Property Size:&nbsp;&nbsp;</span>".$row['property_size']."<br /><br /> 
        <span style='font-weight:bold; '>Property Location:&nbsp;&nbsp;</span>".$row['propert_location']."<br /> 

        <div class='modal-footer'> 
         <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> 
        </div> 
        </div> 
       </div> 
       </div></td></tr>"; 
       $i++; 
} 

これはあなたのために働く希望...

+0

私は知っているが、私の場合は1行だけが必要 – viratpuar

関連する問題