php中的Bootstrap模型,同时循环数据问题

时间:2016-06-20 07:15:20

标签: php twitter-bootstrap

我正在使用Bootstrap模型和html table以及while loop中的详细信息按钮。目前的情况是我只是在表格中显示从数据库中获取数据的数据。 屏幕截图 enter image description here

当我点击此列表中的任何按钮时,我只使用详细信息按钮实现Bootstrep模型,只显示第一个数据条目。例如,当我点击第三个按钮时,模型显示第一个按钮输入数据。

这是我的代码

   <?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);
?>

请建议任何方法。

4 个答案:

答案 0 :(得分:0)

请将数据目标设为动态

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

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

答案 1 :(得分: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);
?>

您需要更改数据目标,希望它会有所帮助。

注意:不要使用mysqli或mysql,使用PDO来避免sql注入

答案 2 :(得分:0)

你的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++;
}

所以我在这里找到的主要问题是:

  1. 您在echo语句中缺少关闭行的tr标记。
  2. 在echo语句中缺少第二列的td标记。
  3. 当您生成动态而不是数据时,按钮的属性根据您的模型不是动态的。
  4. 所以请尝试以下代码:

    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++;
    }
    

    希望这对你有用......

答案 3 :(得分:0)

我刚刚以另一种方式解决了我的问题。首先我把模态放在while循环之外。并按下while循环

模态触发按钮的PHP代码。

    <?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>";
}

将模态放在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>

这是在显示模态时运行的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>