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...

The PHP will run on your server before it is sent to the browser.. — Gonras Karols
– Gonras Karols, Commented Apr 7, 2017 at 7:49

Community · Accepted Answer · 2017-05-23 11:54:31Z

0

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)

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 7, 2017 at 7:52

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EllBrandon Over a year ago

That's good to know regarding single lines in java. Do you know how to reference the java variable inside the php chevrons?

for (i = 1; i < 3; i++) {     toolTip: "Controller i<p>\nProduction <?php echo $SumOfSUP_AC_TODAY_i; ?> kWh<br>\nEnergy <?php echo $SumOfAC_P_i; ?> kW<br>" }

Collectives™ on Stack Overflow

Dynamic loop variable in JavaScript with PHP elements

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related