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 ;)

Answer 1

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>

Answer 2

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

Answer 3

1. You should divide your <script /> into 2 parts.
2. Probably you don't need json_encode php function here. Also add wrapping doublequotes.
3. 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" />