Undefined variable when passing javascript variable to PHP with AJAX

Question

I am trying to build a simple mobile app that checks database and gives user the correct venue based on their location. Essentially, I have two files: one with geolocation, JavaScript and AJAX call, and another one with php that checks the database and sends the correct result back. Everything on its own is working perfectly fine, but when I try to send geolocation coordinates to PHP it returns undefined. Why does it not pick up the coordinates (they pop up in a separate window)? How can I fix it?

Here is my geolocation and AJAX code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
            $( document ).ready(function() {

                var latitude;
                var longitude;

                if (navigator.geolocation) {
                  var timeoutVal = 10 * 1000 * 1000;
                  navigator.geolocation.getCurrentPosition(
                    displayPosition, 
                    displayError,
                    { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
                  );
                }
                else {
                  alert("Geolocation is not supported by this browser");
                }

                function displayPosition(position) {
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;
                  alert("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
                }


                function displayError(error) {
                  var errors = { 
                    1: 'Permission denied',
                    2: 'Position unavailable',
                    3: 'Request timeout'
                  };
                  alert("Error: " + errors[error.code]);
                }

                var request = $.ajax({
                    url: "http://cs11ks.icsnewmedia.net/mobilemedia/ajax.php?latitude=" + latitude + "&longitude=" + longitude,
                    type: "GET",       
                    dataType: "html"
                });

                request.done(function(msg) {
                    $("#ajax").html(msg);         
                });

                request.fail(function(jqXHR, textStatus) {
                    alert( "Request failed: " + textStatus );
                });
           });
    </script>

And here is the bit of PHP that handles these variables:

if (isset($_GET['latitude']) && isset($_GET['longitude'])) {
                        $latitude = $_GET['latitude'];
                        $longitude = $_GET['longitude'];
                        echo "Geolocation seems to work...";
                        echo $latitude;
                        echo $longitude;
                        //continue here
                    }else{
                           echo "Hello. I am your geolocation and I am not working.";
                    }

What I get is "Geolocation seems to work...undefinedundefined"

Answer 1

The Geolocation API is asynchronous, so you have to wait for the result to return

function displayPosition(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    $.ajax({
         url      : "http://cs11ks.icsnewmedia.net/mobilemedia/ajax.php",
         data     : {latitude : latitude, longitude : longitude},
         type     : "GET",       
         dataType : "html"
    }).done(function(msg) {
         $("#ajax").html(msg);         
    }).fail(function(jqXHR, textStatus) {
         alert( "Request failed: " + textStatus );
    });
}

Answer 2

function displayPosition(position) {
                var latitude = position.coords.latitude;
                var longitude = position.coords.longitude;
              alert("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
            }

remove var in both variable. Those two are not visible outside displayPosition. When you use the $.ajax call you're using latitude and longitude declared right under the $(document).raedy() but you never assign nothing to them so they're undefined. Hope this solve your issue.

P.S. You se the values in the alert because you're using ones from position, not from your variables.

Answer 3

Do not use var inside your displayPosition function. You do not want to declare new variables inside the scope of the function, you want to assign values to the existing variables you declared in the global scope earlier.