Send JavaScript variable to PHP

Question

What im trying to do here is sending a JavaScript variable to a PHP function. What I'm developing is a jQuery Mobile App where you can check in when you reach a specific longitude/latitude. But I'm having problem with sending the longitude/latitude to the PHP-function. Im sending it to a PHP-function because im gonna do a comparison with the longitude/latitude that I've stored in my database.

Here's my code.

 function testResults() {
 if(navigator.geolocation) {
 //Get the current position
 navigator.geolocation.getCurrentPosition(function(position) {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
 document.write("lat", latitude);
 document.write('<br /><br />');
 document.write("long", longitude);
 });
 } else {
 alert("Sorry... your browser does not support the HTML5 GeoLocation API");
 }
 //////////// Here I tried with jQuery/Ajax. I know that it's wrong.
 //////////// Im putting it here so that it maybe clarifies what Im 
 //////////// trying to do.
 $.post("checkLocation.php", {
 lat : latitude,
 longi : longitude
 }, function(data) {
 alert("Data Loaded: " + data);
 });
 ////////////////////////////////////////////////////////////////////
 }
 testResults();

How do I approach this problem? I've tried with JSON, but i didn't get it to work. Any help will be appreciated.

• Distdev: show your PHP code (the part with retrieving of params)
• frank_neff: Please post the PHP-Side of your Application.> And make wellformed JSON: { "lat": latitude, "lng": longitude }
• RoToRa: @frank_neff: That's a object literal and not JSON. No need for quotes there. The AJAX library serializes the object into wellformed JSON completely independently from whether source code has quotes or not.
• frank_neff: @RoToRa Sorry, my false. I do ever enquote to be shure ;)
• Oscar: I don't quite have a functional php-side yet. But Im working on it as we speak.

Answer 1

You're sending the request before you get the geolocation response

You need to do it inside the callback.

• Oscar: Im not sure if I understand what you are meaning ?

Answer 2

Try to use AJAX

http://api.jquery.com/jQuery.ajax/

Your handler should look like this:

$.ajax({
 type: "POST",
 url: "checklocation.php",
 data: "lat="+latitude+"&longi="+longitude
}).done(function( msg ) {
 alert( "Data Saved: " + msg );
});

• Oscar: Thank you very much. It looks very helpful. I will look it up right away.
• Mattygabe: You could possibly also build a JSON object in earnest instead of just building a Javascript string to send the data: data: {lat: latitude, longi: longitude }

Answer 3

navigator.geolocation.getCurrentPosition(function(position) {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
 document.write("lat", latitude);
 document.write('<br /><br />');
 document.write("long", longitude);
 });

you have local vars latitude and longitude here. If you want to use them outside of this function you can use global vars:

var latitude;
var longitude;
//...
navigator.geolocation.getCurrentPosition(function(position) {
 latitude = position.coords.latitude;
 vlongitude = position.coords.longitude;
 document.write("lat", latitude);
 document.write('<br /><br />');
 document.write("long", longitude);
 });
//usage(transfer) of vars

Answer 4

Try to use the AJAX-Request in callback (Proof of concept, not shure if it works):

function testResults()
{
 if (navigator.geolocation)
 {
 //Get the current position
 navigator.geolocation.getCurrentPosition(function (position)
 {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
 // do callback 
 $.ajax(
 {
 type: "POST",
 url: "checklocation.php",
 data: "lat=" + latitude + "&lon=" + longitude
 }).done(function (msg)
 {
 alert("Data Saved: " + msg);
 });
 });
 }
 else
 {
 alert("Sorry... your browser does not support the HTML5 GeoLocation API");
 }
}
testResults();

Cheers. Frank

• Oscar: What purpose does the parameter (msg) have?
• frank_neff: I have seen that jqXHR.done() is deprecated in 1.8. Use 'success: function () {}' and 'error: () {}' instead. api.jquery.com/jQuery.ajax