Passing variable between PHP and JS within same HTML

Question

I am reading data from MySQL using PHP. I am then trying to pass that data to the JS below within the same HTML, using it on OpenLayer maps. I have tried various methods including json_encode but cannot seem to pass valid data. When I set the data manually in the JS it works OK. What am I doing wrong with the code? Is there a preferred method?

<html lang="en">

.map { margin: 0; padding: 0; height: 100%; width: 100%; } OnTRack User Tacking

<?php
// ... Other database code removed for example...
$rowlon = 151.215324;
$rowlat = -33.856733;
?>

<div id="map" class="map"></div>
<script type="text/javascript">
    // var latestlon = <?php echo $rowlon; ?>;
    // var latestlat = <?php echo $rowlat; ?>;
    var latestlon = "<?php echo json_encode($rowlon) ?>";
    var latestlat = "<?php echo json_encode($rowlat) ?>";
    // var latestlon = 151.215324;
    // var latestlat = -33.856733;
    var mycoords = [latestlon, latestlat];
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
            source: new ol.source.OSM()
            })
        ],
    view: new ol.View({
      center: ol.proj.fromLonLat(mycoords),
      zoom: 12
    })
  });
</script>

Why do you json_encode? That returns a string object not at all like your commented line below. You can always look at the HTML source and see what your code does — Andreas
– Andreas, Commented Feb 27, 2019 at 4:42
1. Remove the double quotes while using echo - especially if you want to preserve the variable type (the module might be expecting a number type instead of string) 2. It's not necessary to use json_encode since the value is not in an array format. — Nikhil
– Nikhil, Commented Feb 27, 2019 at 5:34

Sanasol · Accepted Answer · 2019-02-27 04:38:50Z

3

var latestlon = <?=$rowlon?>;
var latestlat = <?=$rowlat?>;

You don't need double quotes here and especially json_*

If it doesn't work then you probably doing something other wrong, check browser console for errors.

answered Feb 27, 2019 at 4:38

Sanasol

9121 gold badge8 silver badges24 bronze badges

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

6 Comments

Andreas Over a year ago

Do not use short tags. They are not always supported.

Sanasol Over a year ago

@Andreas short open tags always available since php5.4(released 7 years ago): php.net/manual/en/ini.core.php#ini.short-open-tag

Chris King Over a year ago

Still doesn't seem to work... The code stops at that line and doesn't proceed to the mapping.

Andreas Over a year ago

People are still using PHP 4. I saw a question about PHP 4 just yesterday. And that can be disabled? I just want your answer to be useful for everyone, not only those with 5.4+ and with the correct settings.

Chris King Over a year ago

Console error: "Uncaught SyntaxError: Unexpected token <" This is for any of the options starting with = <?

|

Nikhil · Accepted Answer · 2019-02-27 05:53:02Z

1

This might be due to the following reasons

Reason - 1

 var latestlon = "<?php echo json_encode($rowlon) ?>"; // Type = String
 var latestlat = "<?php echo json_encode($rowlat) ?>"; // Type = String

Change the JS variable to type number by removing the double quotes

 var latestlon = <?php echo json_encode($rowlon) ?>; // Type = Number
 var latestlat = <?php echo json_encode($rowlat) ?>; // Type = Number

Reason - 2

Please check if you are using php file extension

FYI: It is not necessary to use json_encode since the value is not an array.

I hope this helps.

edited Feb 27, 2019 at 5:53

answered Feb 27, 2019 at 5:43

Nikhil

1,45812 silver badges24 bronze badges

1 Comment

Chris King Over a year ago

Thank you so much. Reason 1 & 2. Most importantly I did not know the file had to have a PHP extension even though is had base HTML code. Thanks to all of the input from others too!

Collectives™ on Stack Overflow

Passing variable between PHP and JS within same HTML

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related