将PHP变量传递给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.

Answer 1

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

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

Answer 2

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>

Answer 3

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>