Still trying to pass PHP array to JQuery function inside foreach loop (in Bootstrap3 module)
I have a php page with a foreach loop. I figured out how to pass one variable while in a loop to a JQuery function and work. I am working in Bootstrap3 and passing a variable to a modal. Now I want to do this through an array and I am stumped. I have browsed the internet and this site and I think I am on the right track, but I am missing something.
PHP and HTML:
<?php
$mapinfo = array(
"pos" => $parkrow['pos'],
"name" => $parkrow['name'],
"address" => $parkrow['address'],
"city" => $parkrow['city'],
"state" => $parkrow['state'],
"zip" => $parkrow['zip']
);
?>
Parkour has already been defined ...
<a href="#myModal" role="button" data-toggle="modal" data-target="#myModal" data-whatever="<?php echo json_encode($mapinfo, JSON_PRETTY_PRINT) ?>"><img src="images/locmaps/<?php echo $parkrow['parkid']; ?>.jpg" alt="map to <?php echo $parkrow['parkid'] ?>" class="img-responsive"></a>
In the link above, I am taking the PHP array $ mapinfo, encoding it and submitting it by reference. This worked (minus the coding) with a single PHP variable, but doesn't work with an array.
JQuery
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var mapinfo = button.data('whatever');
alert(mapinfo.name); ...
I've tried doing encoding in JQuery, I've tried putting the script inside href (bad idea I'm sure). I've tried encoding it in a php file and assigning its own PHP variable and passing it in. I am completely stumped.
I don't want to make an AJAX request, if at all possible - the overhead of that is already very high and adding to it will probably be a problem.
The talk below is SEEMED to solve the problem, but when I tested it correctly, I still only got information from the last item in the loop, no matter which button I pressed. For example, if I clicked the "see map" button for a third park, I received a map for the last park. I'm still stumped.
source to share
<?php
$mapinfo = array(
"pos" => $parkrow['pos'],
"name" => $parkrow['name'],
"address" => $parkrow['address'],
"city" => $parkrow['city'],
"state" => $parkrow['state'],
"zip" => $parkrow['zip']
);
?>
and your button (don't write data-whatever
here)
<a href="#myModal" role="button" data-toggle="modal" data-target="#myModal" <img src="images/locmaps/<?php echo $parkrow['parkid']; ?>.jpg" alt="map to <?php echo $parkrow['parkid'] ?>" class="img-responsive"></a>
Instead of writing below code in your JS file, write it to PHP file.
<script>
var myData = <?php echo json_encode($mapinfo) ?>;
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var mapinfo = myData;
alert(mapinfo.name); ..
Maybe you need single quotes around this '<?php echo json_encode($mapinfo) ?>'
source to share
You cannot mix php into a .js file like you do with a regular .php file, since the .js file is not processed by the .php processor the way your .php files are.
The most typical way to do this - including php in a js file - is to simply have inline JS (stuff between tags) in your .php file. Then it will work as expected. So if you are using js or php both in one file and in a .php file, this is not possible in a .js file. `
try this, you should be able to solve your problem.
`
<?php
$mapinfo = array(
"pos" => $parkrow['pos'],
"name" => $parkrow['name'],
"address" => $parkrow['address'],
"city" => $parkrow['city'],
"state" => $parkrow['state'],
"zip" => $parkrow['zip']
);
?>
your Parkrow is defined ...
<a href="#myModal" role="button" data-toggle="modal" data-target="#myModal" data-whatever="<?php echo json_encode($mapinfo, JSON_PRETTY_PRINT) ?>"><img src="images/locmaps/<?php echo $parkrow['parkid']; ?>.jpg" alt="map to <?php echo $parkrow['parkid'] ?>" class="img-responsive"></a>
then write jquery code in php file using tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var myData = <?php echo json_encode($mapinfo) ?>;
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var mapinfo = myData;
alert(mapinfo.name); ..
});
</script>
source to share