JavaScript stops working when a call back function is added

Question

I am experiencing a weird problem in my web page. JavaScript attached to a href gets called just fine and stops working if the called javascript function adds a statement with call-back function in it. Not even the alert placed as the very first statement in the JS func called from href fires in that case.

Here is an example: Following works just fine.

when clicking on this link

<a href = "#" onclick="getMyPosition(); return false;">refresh</a>,

following js func gets called just fine and I see both alert messages indicating that getMyPosition() was executed. Note: at this time (i.e. when the js is seemingly working) the call-back function ("handleposition") is NOT defined but it does not raise any errors! weird in its own right :)

function getMyPosition() { 
  alert("it worked 1.");
  if ( navigator.geolocation )
  {
    alert("it worked 2.");
    navigator.geolocation.getCurrentPosition(handlePosition, handleError, {
    enabledHighAccuracy: true,
    maximumAge: 60000,
    timeout:    30000
    });
  }
}

Now, if I add the following function in the script block, all stops working and it appears that the refresh link was even clicked on. Since everything else on the webpage (which contains JavaScript events etc attached to other items) keeps working fine, my assumption is that JavaSctipt on the page is working fine. Just this link stops calling the func defined on onClick event.

adding the following call-back function causes the behavior as if "refresh" link wasn't even clicked on:

function handlePosition(pos)
{
  alert(pos.coords.latitude);
  alert(pos.coords.longitude);
  window.location.href = "/map?js=y&lat=pos.coords.latitude&lon=pos.coords.longitude";
}

Now if remove this function, the href link shown above will start working again and getMyPosition will get called and I see alert messages again! I do not see any script errors on the page Both IE 11 and Chrome as exhibiting this behavior. I am on Windows 7 32bit machine.

Answer 1

Possibly the biggest problem was the missing error handler for the geolocation callback. Bringing up Chrome's debugger via F12 quickly revealed the problem.

Adding the error handler seemed to fix the problem, but on the way there I cleaned-up a few other things. Here's a fiddle showing it working

Here's how I'd code the link to work in all browsers:

<a href="#" onclick="return(getMyPosition())">refresh</a>

And here's the revised JS code for handle position and the new handleError routine.

Note the "return false" added to your main function:

function getMyPosition() {
    alert("it worked 1.");
    if (navigator.geolocation) {
        alert("it worked 2.");
        navigator.geolocation.getCurrentPosition(handlePosition, handleError, {
            enabledHighAccuracy: true,
            maximumAge: 60000,
            timeout: 30000
        });
    }
    return false;
}

function handlePosition(pos) {
    alert(pos.coords.latitude);
    alert(pos.coords.longitude);
    window.location.href = "/map?js=y&lat=" + pos.coords.latitude + "&lon=" + pos.coords.longitude;
}

function handleError(error) {
    alert(error);
}

Answer 2

Put return false; in at the end of the getMyPosition function

Answer 3

window.location.href = "/map?js=y&lat=pos.coords.latitude&lon=pos.coords.longitude";

should probably be:

window.location.href = "/map?js=y&lat=" + pos.coords.latitude + "&lon=" + pos.coords.longitude;