How to pass json_encoded variables from .php to external .js?

Question

that's my first post :) I have a problem with passing json_encoded variables from PHP VIEW file to an external JS. I am using FuelPHP. The following is part of the VIEW: 1. These are the PHP variables:

<?php
  $sensor_id_num = $sensor->id_num; 
  $sensor_name = $sensor->name;
  $sensor_unit = $sensor->unit;
  $sensor_lati = $sensor->lati;
  $sensor_longi = $sensor->longi;
?>

2. Here the variables are json_encoded and their value is given to JS vars:

<script src="<?php echo Asset::get_file('mapmarkers.js','js') ?>" type="text/javascript">
  var sensor_id_num = <?php echo json_encode($sensor_id_num); ?>;
  var sensor_name = <?php echo json_encode($sensor_name); ?>;
  var sensor_unit = <?php echo json_encode($sensor_unit); ?>;
  var sensor_lati = <?php echo json_encode($sensor_lati); ?>;
  var sensor_longi = <?php echo json_encode($sensor_longi); ?>;
</script>

3. The above mentioned mapmarkers.js is the external JS that I want to pass the vars to. In that JS I am using google.maps javascript API to draw a map and one marker for each map. Every marker is representing a sensor's location, so that's why I'm passing latitude and longitude. That should be part of the php VIEW. That View shows some sensor's text info along with the map.

4. So the text info and the map are visualized, but not the markers. The problem is in the JS file. When I try to use the vars from tag into the JS, the browser console shows their value is 'undefined'. I'm accessing the vars with 'window.name_of_var'. Even when I access them without 'window.' their value is not shown, "Uncaught ReferenceError: sensor_lati is not defined" is shown instead. That's part of the JS:

var myLatLng = new google.maps.LatLng(window.sensor_lati,window.sensor_longi);

var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: window.sensor_name,
        html: window.sensor_name

});
google.maps.event.addListener(marker, 'click', function () {
      infowindow.setContent(html);
      infowindow.open(map, marker);
});

Does anybody has an idea where could the problem be? I don't have much experience with FuelPHP and JavaScript. Any help would be appreciated ;)

maybe do a <script> // all json here </script> then <script src="googlemaps"/> — Abderrahmane TAHRI JOUTI
– Abderrahmane TAHRI JOUTI, Commented Dec 23, 2017 at 9:26

rickdenhaan · Accepted Answer · 2017-12-23 09:28:42Z

2

You cannot have a <script> element with a src attribute and javascript code within it. Well, you can, but it's pretty much undefined what browsers do with that so your results will vary from browser to browser.

The solution would be to first define the variables, then include the remote script:

<script type="text/javascript">
    var sensor_id_num = <?php echo json_encode($sensor_id_num); ?>;
    var sensor_name = <?php echo json_encode($sensor_name); ?>;
    var sensor_unit = <?php echo json_encode($sensor_unit); ?>;
    var sensor_lati = <?php echo json_encode($sensor_lati); ?>;
    var sensor_longi = <?php echo json_encode($sensor_longi); ?>;
</script>
<script src="<?php echo Asset::get_file('mapmarkers.js','js') ?>" type="text/javascript"></script>

answered Dec 23, 2017 at 9:28

rickdenhaan

11.4k32 silver badges42 bronze badges

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

Comments

JoshKisb · Accepted Answer · 2017-12-23 09:29:16Z

1

Set the variables before calling the external js file

<script type="text/javascript">
  var sensor_id_num = <?php echo json_encode($sensor_id_num); ?>;
  var sensor_name = <?php echo json_encode($sensor_name); ?>;
  var sensor_unit = <?php echo json_encode($sensor_unit); ?>;
  var sensor_lati = <?php echo json_encode($sensor_lati); ?>;
  var sensor_longi = <?php echo json_encode($sensor_longi); ?>;
</script>
<script src="<?php echo Asset::get_file('mapmarkers.js','js') ?>" type="text/javascript">

answered Dec 23, 2017 at 9:29

JoshKisb

7528 silver badges10 bronze badges

Comments

tetta · Accepted Answer · 2017-12-23 09:34:11Z

0

You should divide your <script /> into 2 parts.
Probably you don't need json_encode php function here. Also add wrapping doublequotes.
mapmarkers.js must be added after defining your variables

<script type="text/javascript">
  window.sensor_id_num = "<?php echo $sensor_id_num; ?>";
  window.sensor_name = "<?php echo $sensor_name; ?>";
  window.sensor_unit = "<?php echo $sensor_unit; ?>";
  window.sensor_lati = "<?php echo $sensor_lati; ?>";
  window.sensor_longi = "<?php echo $sensor_longi; ?>";
</script>

<script src="<?php echo Asset::get_file('mapmarkers.js','js') ?>" type="text/javascript" />

answered Dec 23, 2017 at 9:34

tetta

4454 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to pass json_encoded variables from .php to external .js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related