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.
