我正在使用Bootstrap
模型和html table
以及while loop
中的详细信息按钮。目前的情况是我只是在表格中显示从数据库中获取数据的数据。
屏幕截图
当我点击此列表中的任何按钮时,我只使用详细信息按钮实现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: </span>".$row['property_name']."<br /><br />
<span style='font-weight:bold; '>Description: </span>".$row['property_desc']."<br /><br />
<span style='font-weight:bold; '>Property Type: </span>".$row['property_type']."<br /><br />
<span style='font-weight:bold; '>Property Sub Type: </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'>×</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: </span>".$row['property_name']."<br /><br />
<span style='font-weight:bold; '>Property Size: </span>".$row['property_size']."<br /><br />
<span style='font-weight:bold; '>Property Location: </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 :(得分: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: </span>".$row['property_name']."<br /><br />
<span style='font-weight:bold; '>Description: </span>".$row['property_desc']."<br /><br />
<span style='font-weight:bold; '>Property Type: </span>".$row['property_type']."<br /><br />
<span style='font-weight:bold; '>Property Sub Type: </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'>×</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: </span>".$row['property_name']."<br /><br />
<span style='font-weight:bold; '>Property Size: </span>".$row['property_size']."<br /><br />
<span style='font-weight:bold; '>Property Location: </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++;
}
所以我在这里找到的主要问题是:
所以请尝试以下代码:
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: </span>".$row['property_name']."<br /><br />
<span style='font-weight:bold; '>Description: </span>".$row['property_desc']."<br /><br />
<span style='font-weight:bold; '>Property Type: </span>".$row['property_type']."<br /><br />
<span style='font-weight:bold; '>Property Sub Type: </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'>×</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: </span>".$row['property_name']."<br /><br />
<span style='font-weight:bold; '>Property Size: </span>".$row['property_size']."<br /><br />
<span style='font-weight:bold; '>Property Location: </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">×</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>