php select fetch while loop into bootstrap modal - php

Question

Have some db information that I'm trying to get into some modals.
Problem seems to be that the modal only ever grabs the variables from the last while loop. Does all the php on a page run first? Even when its not called?
So I know there is probably easier ways to do this using get_results() and fetch_array and fetch_row but those don't seem to work for me in php 5.5.
Also, I read somewhere to use AJAX. Well as I have never used ajax before, is this something I should look into?
<div class="col-md-4">
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
require ($_SERVER['DOCUMENT_ROOT'].'/db-connect.php');
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
//echo $conn->host_info . "\n";
if ($stmt = $conn->prepare("SELECT time, title, tool, descript, thumbpath, smallpath, mediumpath, largepath FROM websites ORDER BY id DESC LIMIT 1")){
//$stmt->bind_param('s',$id);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($time, $title, $tool, $descript, $thumbpath, $smallpath, $mediumpath, $largepath);
while ($stmt->fetch()) {
}
$stmt->free_result();
$stmt->close();
}
$conn->close();
?>
<img class="img-responsive" title="<?php echo $tool; ?>" data-toggle="modal" data-target="#modalPort" sizes="100vw" src="<?php echo $thumbpath; ?>" srcset="<?php echo $smallpath; ?> 500w, <?php echo $mediumpath; ?> 1000w, <?php echo $largepath; ?> 1500w" alt="Portfolio Site">
<span class="time line-height-small"><?php echo $time; ?></span>
</div>
The variable's here work fine. The problem is that I'm running this same php script a few other times with the same bind_result variables. I don't really want to change variables for each modal.
Modal:
<!-- Website Modals-->
<div class="modal fade" id="modalPort" tabindex="-1" role="dialog" aria-labelledby="portfolioModallabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="portfolioModallabel"><?php echo $title; ?></h4>
</div>
<div class="modal-body text-center">
<img class="img-responsive center-block" src="<?php echo $thumbpath; ?>" sizes="100vw" srcset="<?php echo $smallpath; ?> 500w, <?php echo $mediumpath; ?> 1000w, <?php echo $largepath; ?> 1500w" alt="Portfolio Site">
<p class="line-height-small"><?php echo $descript; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

Answer 1

One way is to put modal inside while ($stmt->fetch()) { } assign both modal trigger button and modal itself unique id
Note the data-target="#modalPort<?php echo $id;?>" in modal trigger button and id="modalPort<?php echo $id;?>" in modal HTML
<?php while ($stmt->fetch()) { ?>
<button data-toggle="modal" data-target="#modalPort<?php echo $id;?>" class="btn btn-default">Modal</button>
<div class="modal fade" id="modalPort<?php echo $id;?>" tabindex="-1" role="dialog" aria-labelledby="portfolioModallabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="portfolioModallabel"><?php echo $title; ?></h4>
</div>
<div class="modal-body text-center">
<img class="img-responsive center-block" src="<?php echo $thumbpath; ?>" sizes="100vw" srcset="<?php echo $smallpath; ?> 500w, <?php echo $mediumpath; ?> 1000w, <?php echo $largepath; ?> 1500w" alt="Portfolio Site">
<p class="line-height-small"><?php echo $descript; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
Alternate If you want to do with ajax, put modal HTML outside the while loop, add <?php echo $id;?> as data attribute to modal trigger button data-id="<?php echo $id;?>"
<?php while ($stmt->fetch()) { ?>
<button data-toggle="modal" data-target="#modalPort" data-id="<?php echo $id;?>" class="btn btn-default">Modal</button>
<?php } ?>
Modal event listener to get the data attribute value and later use in Ajax method to get the respective row data to show in modal
$(document).ready(function(){
$('#modalPort').on('show.bs.modal', function (e) {
var dataid = $(e.relatedTarget).data('id');
var dataString = 'dataid=' + dataid;
$.ajax({
type: "POST",
url: "get_data.php",
data: dataString,
cache: false,
success: function(data){
$("#content").html(data);
}
});
});
});
get_data.php will be
<?php
//Include database connection
if($_POST['dataid']) {
//run query against `dataid`
?>
<div class="modal-header">
<h4 class="modal-title" id="portfolioModallabel"><?php echo $title; ?></h4>
</div>
<div class="modal-body text-center">
<img class="img-responsive center-block" src="<?php echo $thumbpath; ?>" sizes="100vw" srcset="<?php echo $smallpath; ?> 500w, <?php echo $mediumpath; ?> 1000w, <?php echo $largepath; ?> 1500w" alt="Portfolio Site">
<p class="line-height-small"><?php echo $descript; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<?php } ?>
and Modal HTML will be (outside the loop)
<div class="modal fade" id="modalPort" tabindex="-1" role="dialog" aria-labelledby="portfolioModallabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="content"></div> //display data output via ajax
</div>
</div>
</div>