Extract data from mysql and use them in javascript

Question

I'm trying to extract/get data from MySQL databse and use them in javascript. I found get data from mysql database to use in javascript very useful but I'm not able to show anything (I've never used jQuery, so probably I'm missing something but I'm not able to figure out what yet)

<?php
error_reporting(0);
require 'db/connect.php';
require 'function/security.php';

$records = array();

if($result = $db->query("SELECT geoLat,geoLong FROM Stop")){
    if($result->num_rows){
        while ($row = $result->fetch_object()){
            $records[] = $row;
        }
        //$result->free();
    }
}

/*echo '<pre>', print_r($result),'</pre>';
echo '<pre>', print_r($records),'</pre>';*/
echo json_encode($records);

?>

<!DOCTYPE html>
<html>
<head>
    <title>BrindisiBus</title>
    <style>
    /* style settings for Google map */
    #map-canvas{
        width : 500px;  /* map width */
        height: 500px;  /* map height */
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <!--- API GOOGLE MAPS V3 -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
    $.getJSON('paline.php', function(data) {
      $.each(data, function(fieldName, fieldValue) {
        $("#" + fieldName).val(fieldValue);
      });
    });
    /*
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
*/
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
    <div id='map-canvas' ></div><br/>
    <p id="total"></p>
    <p id="fieldName"></p>
</body>
</html>

With the query I get longitude and latitude, than I should save that values in js and create markers on the map. Is it possible to do everything in the same file? How could I check if getJSON is working at least and if it's giving errors?

$("#" + fieldName).val(fieldValue); here fieldName must exists in HTML — user4767190
– user4767190, Commented Jun 2, 2015 at 12:09
Do you mean ? I tried also with <input type="text" id="fieldName" /> but I don't get result — Mitro
– Mitro, Commented Jun 2, 2015 at 12:13
I mean and try with this — user4767190
– user4767190, Commented Jun 2, 2015 at 12:16

Karthick Kumar · Accepted Answer · 2015-06-03 07:32:03Z

2

    <?php
    error_reporting(0);
    require 'db/connect.php';
    require 'function/security.php';

    $records = array();

    if($result = $db->query("SELECT geoLat,geoLong FROM Stop")){
        if($result->num_rows){
            while ($row = $result->fetch_object()){
                $records[] = $row;
            }
            //$result->free();
        }
    }

    /*echo '<pre>', print_r($result),'</pre>';
    echo '<pre>', print_r($records),'</pre>';*/
    $data=json_encode($records);

    ?>

    <!DOCTYPE html>
    <html>
    <head>
        <title>BrindisiBus</title>
        <style>
        /* style settings for Google map */
        #map-canvas{
            width : 500px;  /* map width */
            height: 500px;  /* map height */
        }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <!--- API GOOGLE MAPS V3 -->
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
var data=<?php echo $data; ?>
    function initialize() {

          $.each(data, function(fieldName, fieldValue) {
            $("#fieldName").val(fieldValue.geoLat);
          });

        /*
      var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
      var mapOptions = {
        zoom: 4,
        center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
      });
    */
    }

    google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id='map-canvas' ></div><br/>
        <p id="total"></p>
        <p id="fieldName"></p>
    </body>
    </html>

edited Jun 3, 2015 at 7:32

answered Jun 2, 2015 at 13:21

Karthick Kumar

2,3751 gold badge19 silver badges30 bronze badges

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

2 Comments

Mitro Over a year ago

Nothing is show in fieldName, but now var data in javascript contain the object

Karthick Kumar Over a year ago

come on chat i will explain you

Collectives™ on Stack Overflow

Extract data from mysql and use them in javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related