Question

I’m trying to pass a variable via jquery ajax call. I’m not exactly sure how to do it properly. I get the lon lat coordinates through another html5 script.

How do i get the coordinates on the other side? I tried $_GET(lat).

I’m also not sure if i’m able to use the location.coords.latitude in a different < script >.

$.ajax({  
    cache: false,
    url: "mobile/nearby.php", 
    dataType: "html",
    data: "lat="+location.coords.latitude+"&lon="+loc.coords.longitude+,
    success: function (data2) {
    $("#nearbysgeo").html(data2);

    }
});

These scripts are above the jquery code

<script type="text/javascript">
  google.setOnLoadCallback(function() {

    $(function() {

      navigator.geolocation.getCurrentPosition(displayCoordinates);

      function displayCoordinates(location) {

        var map = new GMap2(document.getElementById("location"));
        map.setCenter(new GLatLng(location.coords.latitude, location.coords.longitude), 12);
        map.setUIToDefault();
        var point = new GLatLng(location.coords.latitude, location.coords.longitude);
        var marker = new GMarker(point);
        map.addOverlay(marker);


      }

    })
  });
</script>   
    <script type="text/javascript" charset="utf-8">

    function getLocation(){

        if (navigator.geolocation) {

          navigator.geolocation.getCurrentPosition(success, error);

        } else {

            document.getElementById("output").innerHTML = "Your browser doesn't handle the  GeoLocation API. Use Safari, Firefox 4 or Chrome";

        }


    }
    function success(loc){

        console.log(loc);

        strout = "";

        for(l in loc.coords){

            //strout += l +" = " +loc.coords[l] + "<br>";

        }
        strout += '';
        strout += '<center><img src="http://maps.google.com/maps/api/staticmap?center='+loc.coords.latitude+','+loc.coords.longitude+'&markers=color:blue%7Clabel:Y%7C'+loc.coords.latitude+','+ loc.coords.longitude+'&zoom=15&size=400x250&sensor=false&center=currentPosition"></center>';

        document.getElementById("output").innerHTML = strout;

        document.forms['newPostForm'].lat.value = loc.coords.latitude;
        document.forms['newPostForm'].lon.value = loc.coords.longitude;
        document.getElementById("coords").innerHTML = '';
        document.getElementById("coords").innerHTML = 'CURRENT: Lat:' + loc.coords.latitude + ' Lon:' + loc.coords.longitude;

    }


    function error(err){

        document.getElementById("output").innerHTML = err.message;

    }

    function clearBlog() {
            document.getElementById("listview").innerHTML = '';
        }
    </script>

ADDITIONAL INFO:

It works if I use this line. So i guess i can’t use loc.coords.latitude this way.

data: "&lat=43&lon=-79.3",

Well i hacked it for now to get it working. I filled two hidden form elements on the page with lon and lat values. Then used ‘document.forms[‘newPostForm’].lat.value’ to create a line like this.

data: "&lat="+document.forms['newPostForm'].lat.value+"&lon="+document.forms['newPostForm'].lon.value,

Still would like an actual solution.

Answer 1

Here’s some code from a project I’m working on. Very simple.

$.post("../postHandler.php", { post_action: "getRecentPosts", limit: "10" }, function(data){
            $("#post-list").html(data);

You can switch out .post with .get with no other changes, like so:

$.get("../postHandler.php", { post_action: "getRecentPosts", limit: "10" }, function(data){
            $("#post-list").html(data);

Data is passed in name value pairs like so.

{ post_action: "getRecentPosts", limit: "10" }

Rewrite:

$.get("mobile/nearby.php", { lat: location.coords.latitude, lon: loc.coords.longitude }, function(data2){
             $("#nearbysgeo").html(data2);
});