Dynamic loop variable in JavaScript with PHP elements

Question

I'm using a jquery plugin called imagemapster to create a map with mysql / php content and values.

There are 120+ defined areas on the map and I'd like to use a loop to write the code for each pop up tooltip. Although I can create a loop in JavaScript and replace plain text I'm not having any luck including the JavaScript variables (i) inside the PHP elements.

The code I'm trying to replace is below. I'd like every instance of the number (1,2 and 3) to be generated by the loop. Is it possible to mix JavaScript and PHP like this?

<script>
$(document).ready(function ()
{

$('#shape1').mapster({
showToolTip: true,
toolTipContainer: '<div class="map_popup"></div>',
    fill : true, 
  areas:  [
          {                
           key: "1", 
           toolTip: "Controller 1<p>
                     Production <?php echo $SumOfSUP_AC_TODAY_1; ?> kWh<br>
                     Energy <?php echo $SumOfAC_P_1; ?> kW<br>",
                     },
           {                
           key: "2", 
           toolTip: "Controller 2<p>
                     Production <?php echo $SumOfAC_TODAY_2; ?> kWh<br>
                     Energy <?php echo $SumOfAC_P_2; ?> kW<br>",
                     },
           {                
           key: "3", 
           toolTip: "Controller 3<p>
                     Production <?php echo $SumOfSUP_AC_TODAY_3; ?> kWh<br>
                     Energy <?php echo $SumOfAC_P_3; ?> kW<br>",
                     }

           etc etc...

Answer 1

Yes it is possible, however you cannot have newlines in the JavaScript.

In modern browsers you can use the backtick instead of quotes

toolTip: `Controller 1<p>
          Production <?php echo $SumOfSUP_AC_TODAY_1; ?> kWh<br>
          Energy <?php echo $SumOfAC_P_1; ?> kW<br>`

but to be compatible, use \n or nothing instead:

toolTip: "Controller 1<p>\nProduction <?php echo $SumOfSUP_AC_TODAY_1; ?> kWh<br>\nEnergy <?php echo $SumOfAC_P_1; ?> kW<br>"

You can also generate the strings in the PHP:

How to handle newlines in Javascript? (from PHP)