CODEWITHSUNDEEP
phpmysqlajaxjquerygeolocation
Jason
Jason

Reputation: 901

Using AJAX to send lat & lng variables to PHP for proximity calculation

To start, thank you in advance for all insight and assistance.

I have a MySQL database (single table, really) with 9 entries for testing. Fields include id, name, address, city, state, zip, lat, lng, etc. My goal is to load a main page with location awareness enabled, use Javascript to set user latitude and longitude as variables, then using AJAX, send those variables to another .php page so the variables can be placed into the calculation formula in my query. There is a second AJAX instance which then fetches the results of the query from the server after the variables have been sent and the whole page processed.

My second AJAX instance very successfully calls the results from the second page. If I manually set the variables, I get my nicely sorted list, and if I rely on the Javascript variables, I am fed an error. I'm not sure where I am going wrong.

I am aware this may seem like a duplicate question. I've spent the last 8 hours on SO reading other questions which I had hoped would help me. Unfortunately, every example I have tried does not work.

My code on my main page (test.php) is this:

<html><head></head><body>
<script type="text/javascript">
if(navigator.geolocation)
  {
  navigator.geolocation.getCurrentPosition(function(position)
   {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
$.ajax({
        type: "POST", 
        url:  "locations-ajax.php", 
        data: 'x='+lat+'&y='+lng,
        });  
 });
}
</script>
<!--begin list area-->
<script>
function getXMLHttp()
{
var xmlHttp
try
{
//Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
//Internet Explorer
try
{
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
  try
  {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch(e)
  {
    alert("Your browser does not support AJAX!")
    return false;
  }
}
}
return xmlHttp;
}
function MakeRequest()
{
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
  HandleResponse(xmlHttp.responseText);
}
  }
 xmlHttp.open("GET", "locations-test.php", true); 
 xmlHttp.send(null);
}

function HandleResponse(response)
{
document.getElementById('listarea').innerHTML = response;
}
</script>
<div class="container"><input type='button' onclick='MakeRequest();' value='Get List'/></div>
<div class="container"><div id="listarea">
</div></div></div>
</body>
</html>

My page to generate my sorted list is this: (locations-test.php)

<?php
/*   $x = 32.839001;
$y = -79.852316;   */
mysql_connect("localhost", "root", "") or die(mysql_error());
 echo "Connected to MySQL<br />";
mysql_select_db("test_db") or die(mysql_error());
 echo "Connected to Database <br>";
// Make a MySQL Connection
  $x = @$_POST['x'];
  $y = @$_POST['y']; 
 if (!empty($x)){
        echo 'x not empty';
    }else{
        echo 'x is not set or empty';
    }
    echo "$x";
 echo "<br>";
    if (!empty($y)){
        echo 'y not empty';
    }else{
        echo 'y is not set or empty';
    }
 echo "<br>";  

$query = "SELECT * , ( 3959 * acos( cos( radians($x) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians($y) ) + sin( radians($x) ) * sin( radians( lat ) ) ) ) AS distance FROM locations HAVING distance < 2500 ORDER BY distance LIMIT 0 , 20;"; 
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array( $result )) {
    echo "<div class='row'><div class='logo'><img src='foo.png' width='20' height='20'></div><div class='siteblock'><div class='sitename'>"; 
    echo $row['site_name'];
    echo "</div><div class='address'>"; 
    echo $row['street_number'];
    echo " ";  
    echo $row['street_name'];
    echo "</div></div></div>"; 
}
?>

I've left my tests in the code, but commented out. If I assign the variables a value, I get the proper results in my table, and it outputs nicely to test.php.

The page connects to the database just fine, but the values for lat and lng do not pass from test.php to locations-test.php.

I'm really not sure what I am missing, but hopefully it is something simple. I am running WAMP 64 bit with PHP 5.4.3, MySQL 5.5.24, and Apache 2.2.22.

I would rather hope it is oversight on my part rather than anything else.

Upvotes: 1

Views: 3954

Answers (2)

Elliot Levin
Elliot Levin

Reputation: 460

If you consider using Jquery for the ajax request, you should code the data you want to send as an object,

$.ajax({
    type: "POST", 
    url:  "locations-ajax.php", 
    data: {
         lat: lat,
         lng: lng 
    }
});

This should send the data to the server as your php is expecting. Also note that the was a comma after the last setting for the ajax request in your previous code.

But without Jquery it seems that you aren't sending any variables in your MakeRequest function. You would have to add the geolocation code and send the co ordinates from there,

function MakeRequest()
{
    if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(function(position)
        {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            var xmlHttp = getXMLHttp();
            xmlHttp.onreadystatechange = (function()
            {
               if (xmlhttp.readyState==4 && xmlhttp.status==200)
               {
                   HandleResponse(xmlHttp.responseText);
               }
            });
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlHttp.open("POST", "Encoder/Index", true); 
            xmlHttp.send("x=" + lat + "&y=" + lng);
        });
    }
}

This should achieve your goal.

Upvotes: 2

Salman Arshad
Salman Arshad

Reputation: 272036

Since you're using jQuery there is absolutely no need to use the XMLHTTP functions. Also, it seems like you're trying to send data via jQuery and retrieve via XMLHTTP; that is incorrect. You could rewrite your code like this:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        $.ajax({
            type: "POST",
            url: "locations-ajax.php",
            data: {
                x: position.coords.latitude,
                y: position.coords.longitude
            },
            success: function (data) {
                $("#listarea").html(data);
            }
        });
    });
}

Upvotes: 3

Related Questions