Passing PHP-Variables to Jquery

Question

i want to load some data from an sql-table and use them with jquery to color a map.

I picked up the data with PHP:

<?php
  include 'connect.php';
  session_start();
  $userid = $_SESSION['userid'];

  $sql = "
  SELECT landstatus.shortland
  FROM landstatus         
  WHERE users_id='1' 
  AND status ='wanttovisit'
  ";

  $result = $conn->query($sql);

  if ($result->num_rows > 0) {
      // output data of each row
      while($row = $result->fetch_assoc()) {
          echo $row["shortland"]. "<br>";
      }
  } 
  $conn->close();
?>

Now i want to use shortland for the static value 'ca' in jquery:

<script>
  jQuery(document).ready(function () {
      jQuery('#vmap').vectorMap({
      map: 'world_en',
      backgroundColor: '#333333',
      color: '#FFFFFF',
      hoverOpacity: 0.7,
      selectedColor: '#727272',
      enableZoom: true,
      colors:{
              'ca' : '#4E7387',
          },
          series: {
            regions: 
            [{
              attribute: 'fill'
            }]
          },

      onRegionClick: function (element, code, region) {
        $(".info-box-region").append(region);
        $(".info-box").show();
        $("input[name=region]").val(region);
        $('input[name=code]').val(code);
      }

    });
  });
</script>

At the end colors would be filled with all shortlands from the database - each shortland has the same hex-code.

Thx for helping me.

Just simply echo them in PHP in place where you want to put them in JS, for example: `var new = '= $var ?>';` — Grzegorz J, Feb 18 '16 at 21:49
Possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — Derek Pollard, Feb 18 '16 at 22:09

score 0 · Answer 1 · answered Feb 18 '16 at 21:57

0

You can "pass" anything PHP knows into JavaScript variables simply by echoing them into JavaScript code in your template:

<script>
    var myJavaScriptVar = <?php echo $myPhpVar ?>
</script>

answered Feb 18 '16 at 21:57

AmericanUmlaut

2,817
2
17
27

score 0 · Answer 2 · answered Feb 18 '16 at 21:58

Just do this:

<script>
  jQuery(document).ready(function () {
      jQuery('#vmap').vectorMap({
      map: 'world_en',
      backgroundColor: '#333333',
      color: '#FFFFFF',
      hoverOpacity: 0.7,
      selectedColor: '#727272',
      enableZoom: true,
      colors:{
              'ca' : '<?php echo $row["shortland"] ;?>',
          },
          series: {
            regions: 
            [{
              attribute: 'fill'
            }]
          },

      onRegionClick: function (element, code, region) {
        $(".info-box-region").append(region);
        $(".info-box").show();
        $("input[name=region]").val(region);
        $('input[name=code]').val(code);
      }

    });
  });
</script>

Peter · Accepted Answer · 2016-02-18T22:11:01.137

0

Place all shortland values in an array and loop through it to create the ca entries

  $result = $conn->query($sql);

  $shortlands = array();
  if ($result->num_rows > 0) {
     // output data of each row
     while($row = $result->fetch_assoc()) {
        $shortlands[] = $row["shortland"];
     }
  }

Then loop over the values. e.g.

colors:{
<?php
foreach ($shortlands as $val) {
   echo "'{$val}': '#4E7387',\n";
}
?>
},

edited Feb 18 '16 at 22:11

answered Feb 18 '16 at 22:05

Peter

2,172
1
15
11

yeah. thanks! thats the solution. sometimes its more easier than expected. – Feb 18 '16 at 22:14
also, I think it'd be better placing `session_start();` before any thing else, including the include, just in case anything is sent to the client by the included php e.g space after `php?>` end tag – Peter Feb 18 '16 at 22:15

Passing PHP-Variables to Jquery

3 Answers3