Still trying to Pass a PHP array to a JQuery function inside foreach loop (into Bootstrap3 modal)

Question

I have a php page with a foreach loop. I have figured out how to pass a single variable while in the loop to a JQuery function properly and have it work. I'm working in Bootstrap3 and am passing the variable into a modal window. Now I want to do it through an array and I am stumped. I have scoured the internet and this site, and I think I'm on the right track, but I'm 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']
    );
?>

Parkrow was already 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'm taking the PHP Array $mapinfo, encoding it, and sending it through the link. This worked (minus the encoding) with a single PHP variable, but is not working with the 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 the encode in the Jquery, I've tried putting a script inside the href (a bad idea, I'm sure). I've tried encoding it in the php file and assigning it to it's own PHP variable and passing that. I'm totally stumped.

I do not want to do an AJAX request if at all possible - the overhead on this is already very high and adding to it would probably be a problem.

The conversation below SEEMED to solve the problem, but when I tested it properly, I still only got the information from the last item in the loop no matter which button I pushed. For instance if I pushed the "see map" button for the third park, I got the map for the last park. I'm still stumped.

Answer 1

<?php
    $mapinfo = array(
        "pos" => $parkrow['pos'],
        "name" => $parkrow['name'],
        "address" => $parkrow['address'],
        "city" => $parkrow['city'],
        "state" => $parkrow['state'],
        "zip" => $parkrow['zip']
    );
?>

and your button (do not 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>

And instead of writing below code in your JS file, write it into PHP file instead.

<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 your need single-quotes around that '<?php echo json_encode($mapinfo) ?>'

Answer 2

You can't mix in php into a .js file, the way you would with a normal .php file, since the .js file is not preprocessed by the .php engine the way your .php files are.

The most typical way to do this--including php in a js file--is to just have inline JS (stuff between tags) in your .php file. Then it will work as expected. So if you use js or php both in single file then you in .php file it not posible in .js file.`

try this you can 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 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 the 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>