CODEWITHSUNDEEP
javascriptphpjquerymysqljson
Mitro
Mitro

Reputation: 1260

Extract data from mysql and use them in javascript

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?

Upvotes: 1

Views: 3119

Answers (1)

Karthick Kumar
Karthick Kumar

Reputation: 2361

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

Upvotes: 2

Related Questions