Hi all,
I'm pulling data out from a database and then looping through the data using a foreach loop to display it in a table. I'm then trying to use the Boostrap 3 Modal JS so that when a user clicks on one of the rows in the table, a modal window appears showing the data taken from the table row along with a Googlemap (data in database holds longitude and latitude info). Trouble I'm having is the way I'm doing it at the moment, I can only seem to pull out the first or last record in the table from the foreach loop. So I'm guessing I need to pass the PHP data through to jQuery to be able to work with it?
Below is a simplified example version of what I'm working with. Hope this makes sense!
<?php
$pets = [
'dog' => [
'name' => 'bob',
'age' => '4',
'color' => 'brown'
'lon' => '5',
'lat' => '34'
],
'cat' => [
'name' => 'felix',
'age' => '9',
'color' => 'black',
'lon' => '52',
'lat' => '342'
]
];
foreach ($pets as $key => $value)
{
echo '<p>Type = ' . $key . '</p>';
echo '<ul>';
foreach ($value as $_key => $_value)
{
echo '<li><a data-toggle="modal" href="#myModal">' . $_key . ' - ' . $_value . '</a></li>';
?>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Detaisl of pet</p>
<p><?php echo $_key . ' - ' $_value;?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<?php
}
echo '</ul>';
}
