Sending current location coordinates to the server as a GET message

Question

I need to send my current location to a php file on a server. However, the method i am using prints out the result of the php response before the location coordinates are found. It takes 2-3 sec for the coordinates to get displayed :

<script>
var lat;
var lng;
        function clicked(){

        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(success,error);
        }

        else{
            document.getElementById("hello").innerHTML = "Not supported";
        }

        function success(position){
                lat = position.coords.latitude;
                lng = position.coords.longitude;
                document.getElementById("hello").innerHTML = "lat :"+lat+"<br>long :"+lng;
                }

        function error(err){
                document.getElementById("hello").innerHTML = "Error Code: "+error.code;
                if(err.code == 1){
                    document.getElementById("hello").innerHTML = "Access denied";
                    }
                if(err.code == 2){
                    document.getElementById("hello").innerHTML = "Position unavailable";
                }
        }

        }


        var xmlhttp;
        if (window.XMLHttpRequest){ 
                xmlhttp = new XMLHttpRequest();
            }else{ 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("list").innerHTML = xmlhttp.responseText;
                    }
            }
            xmlhttp.open("GET","queryRestaurantsList.php?lat="+lat+"&lng="+lng,true);
            xmlhttp.send(); 
    }

</script>   

php file The echo of $_POST appears before the coordinates are found and hence the $_POST array is displayed as empty

<?

echo var_dump($_POST);

echo "HEllo WOrld!";

?>

Answer 1

A couple of things..

1) You're (trying) to send the co-ordinates by GET, not POST. I'd expect $_POST to be empty.
2) You want to move the AJAX call to the success() callback handler. eg

<script>
var lat;
var lng;
    function clicked(){

    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(success,error);
    }

    else{
        document.getElementById("hello").innerHTML = "Not supported";
    }

    function success(position){
            lat = position.coords.latitude;
            lng = position.coords.longitude;
            document.getElementById("hello").innerHTML = "lat :"+lat+"<br>long :"+lng;

            var xmlhttp;
            if (window.XMLHttpRequest){ 
                xmlhttp = new XMLHttpRequest();
            }else{ 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("list").innerHTML = xmlhttp.responseText;
                    }
            }
            xmlhttp.open("GET","queryRestaurantsList.php?lat="+lat+"&lng="+lng,true);
            xmlhttp.send(); 

            }

    function error(err){
            document.getElementById("hello").innerHTML = "Error Code: "+error.code;
            if(err.code == 1){
                document.getElementById("hello").innerHTML = "Access denied";
                }
            if(err.code == 2){
                document.getElementById("hello").innerHTML = "Position unavailable";
            }
    }

    }
}

</script>   

xmlhttp.onreadystatechange may need to be outside of the function scope, I'm not sure. I use jQuery, which handles it all for you. ;).