HTML5 Geolocation Doesn't Work First Time

Question

Really hoping somebody can help me with this problem, I seem to have this HTML5/Jquery combination working perfectly except it takes a refresh for it to work!

Basically I am using HTML5 geolocation to store the users lat/long in a session and then do some other stuff with it. What I do with it after isn't a problem, it's actually storing the lat/long that is giving me grief.

The code I am using is below. I have commented where I have figured out the problem is.

Any help appreciated!

<?php
session_start();
$url = $_SERVER["REQUEST_URI"];
?>
<script src="modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  }
function showPosition(position)
  {
localStorage.lat = position.coords.latitude;
localStorage.lon = position.coords.longitude;

  }

$(document).ready(function(){
    if (Modernizr.geolocation) {
        getLocation();
        //If I run getLocation() again here it works first time
        //A bit of debugging shows that this is where the lat/long values are being lost
        $.get("savetosession.php", {lat: localStorage.lat, lon: localStorage.lon}, function(result){
            $.get("dothis.php", {url:<?php echo $url; ?>}, function(result){
                $("div").html(result);
            });
        });
    }
});

</script>
<div></div>

Try moving the jquery stuff in to another function, then call that function from showPosition() — Neil
– Neil, Commented Sep 15, 2012 at 13:53
That worked, thanks so much! I put the jquery in a new function, called that function from showPosition and called getLocation on document ready.a — KyleC
– KyleC, Commented Sep 15, 2012 at 14:17
You have to be careful when echoing strings in Javascript. At least, put " around it, and make sure it does not contains JS special chars, or use json_encode. — Guillaume Poussel
– Guillaume Poussel, Commented Sep 15, 2012 at 14:18
@user1021803 - super, glad it worked, now go enjoy the weekend.. — Neil
– Neil, Commented Sep 15, 2012 at 15:05

maxdec · Accepted Answer · 2012-09-15 14:14:58Z

1

The problem is that the $.get is executed before getLocation() is done (because Javascript is non-blocking).

You could use a callback like this:

<script>
        $(document).ready(function(){
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    localStorage.lat = position.coords.latitude;
                    localStorage.lon = position.coords.longitude;
                    $.get("savetosession.php", {lat: localStorage.lat, lon: localStorage.lon}, function(result){
                        $.get("dothis.php", {url:<?php echo $url; ?>}, function(result){
                            $("div").html(result);
                        });
                    });
                });
            } //endif
        });
</script>

answered Sep 15, 2012 at 14:14

maxdec

5,7152 gold badges32 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML5 Geolocation Doesn't Work First Time

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related