Home/ Questions/Q 6242993
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T12:03:19+00:00

I have a table being pulled from MySql through PHP.. The TD in the

  • 0

I have a table being pulled from MySql through PHP.. The TD in the tables have unique IDs and get autoincremented in a loop.

$i=0;
while($row = mysql_fetch_array($result))

  {     $i = $i+1;
        echo "<tr>";
        echo "<td>" . $row['DRAINNAME'] . "</td>";
        echo "<td id='lat" . $i ."'>" . $row['LATITUDE'] . "</td>";
        echo "<td id='lon" . $i ."'>" . $row['LONGITUDE'] . "</td>";
        echo "<td> <input type='button' onclick='detect_load();' value='Click Me' /><br>
        <div id='divsec". $i ."' style='width: 200px; height: 200px;'></div> </td>";
        echo "</tr>";
  }
echo "</table>";

Im writing a Javascript function which should get values from the unique IDs of the TDs..

  function getLocation(pos) {
      latitude = document.getElementById('lat'+ '<?php echo $i; ?>').innerHTML;
      longitude = document.getElementById('lon'+ '<?php echo $i; ?>').innerHTML;
      load_map();
  }

But the '<?php echo $i; ?>' dosent seem to work.. 🙁
I mean, for example— If the value of i is 2, then td becomes lat2 and lon2
but in javascript, its not taking those ID values i.e. lat2 and lon2..
its giving an error saying its NULL ..

Here is the full Code if you cannot understand it….

<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var latitude = '';
  var longitude = '';

  function getLocation(pos) {
      latitude = document.getElementById('lat'+ <?php echo $i; ?>).innerHTML;
      longitude = document.getElementById('lon'+ <?php echo $i; ?>).innerHTML;
      load_map();
  }
  function unknownLocation(){alert('Could not find location');}


  function detect_load(){
    navigator.geolocation.getCurrentPosition(getLocation, unknownLocation);

  }

  function load_map() { 
    if(latitude == '' || longitude == '')
      return false;
    var latlng = new google.maps.LatLng(latitude, longitude);
    var config = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var map = new google.maps.Map(document.getElementById('divsec'+ <?php echo $i; ?>),config);

                  var marker = new google.maps.Marker({
                  position: latlng, 
                  map: map, 
                  title:"Your requested location!"
              });

  }
</script>

</head>
<body>

<?php
include 'datalogin.php';

$result = mysql_query("SELECT DRAINNAME, LATITUDE, LONGITUDE FROM draininfo");

echo "<table border='1' name='tab1'>
<tr>
<th>Drain Name</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Show On Map</th>
</tr>";
$i=0;
while($row = mysql_fetch_array($result))

  {     $i = $i+1;
        echo "<tr>";
        echo "<td>" . $row['DRAINNAME'] . "</td>";
        echo "<td id='lat" . $i ."'>" . $row['LATITUDE'] . "</td>";
        echo "<td id='lon" . $i ."'>" . $row['LONGITUDE'] . "</td>";
        echo "<td> <input type='button' onclick='detect_load();' value='Click Me' /><br>
        <div id='divsec". $i ."' style='width: 200px; height: 200px;'></div> </td>";
        echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>


</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Woah, the last question contained a little bit more context.

    I would not retrieve the information via DOM. It’s better to supply this information directly to the function:

    echo "<td id='lat" . $i ."'>" . $row['LATITUDE'] . "</td>";
echo "<td id='lon" . $i ."'>" . $row['LONGITUDE'] . "</td>";
echo "<td> <input type='button' onclick='detect_load(" 
    . $row['LATITUDE'] . ","
    . $row['LONGITUDE'] . "," 
    . "\"divsec" . $i . "\");' value='Click Me' /><br>
<div id='divsec". $i ."' style='width: 200px; height: 200px;'></div> </td>";

    And then the Javascript-part – incomplete – but notice how the parameters are passed through to the point where they are needed:

    function createGetLocation(latitude, longitude, div) {
    return function(pos) {
        load_map(latitude, longitude, div);
    };
}

function unknownLocation(){alert('Could not find location');}


function detect_load(latitude, longitude, div) {
    var getLocation = createGetLocation(latitude, longitude, div);
    navigator.geolocation.getCurrentPosition(getLocation, unknownLocation);
}

function load_map(latitude, longitude, div) {
    var latlng = new google.maps.LatLng(latitude, longitude);
    var config = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById(div), config
    // and so on...
}
    • 0