Bootstrap model in php while loop data issue
Question
I am working with Bootstrap Model and html table with details button in while loop . The current scenario is i just showing data in table with fetched data from database. Screen shot
I just implement Bootstrep model with details button when i click on any button in this list is just showing only first entry of data. For example when i click on third button the model is showing first button entry data.
This is my code
<?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);
?>
Please suggest any way to do this.
4 answers
solution1
0 2016-06-20 07:23:43
Kindly make data target dynamic as well
<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal' id='modelbutton'>
to
<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal".$i."' id='modelbutton'>
solution2
0 2016-06-20 07:28:12
<?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);
?>
you need to change data-target,hope it will help.
Note: don't use mysqli or mysql, use PDO to avoid sql injections
solution3
0 2016-06-20 07:28:58
Your while loop looks like:
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++;
}
So there are 3 main issue I found here is:
- You are missing tr tag closing for row in echo statement.
- Missing td tag closing for second column in echo statement.
- When you generate dynamic than data-target attribute of button is not dynamic according to your model.
So please try this code:
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++;
}
Hope this works for you...
solution4
0 ACCPTED 2016-06-21 11:51:19
I just solved my problem in another way.First i put modal outside of while loop. And button in while loop
php code of modal triggered button.
<?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>";
}
put modal outside of while loop
<!-- 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>
This is a ajax code run when modal is shown.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
PHP while loop issue
Php while and for loop issue
Column Bootstrap in while loop PHP
Bootstrap columns in a php while loop
Ajax and PHP with a while loop issue
PHP: Issue with while loop condition
Simple Issue with PHP While Loop
Php error issue in while loop
Foreach while loop php issue
php performance issue in while loop
Related Tags