I have a button where I've hooked the onclick to a call to retrieve the users location and then use the location to make another call to retrieve a list of nearby locations. For some reason the geolocation success method is being called twice on the second click of the button.

So I load the page, click the button, allow permission to use my location, and it will make one ajax request to get the nearby locations. This works fine.

I click the button again, allow permission to use my location (again), it will make one ajax request to get the locations, wait ~2 seconds, and then make another request using the same coordinates without me allowing permission. So the success method has to be getting called twice, but I'm not sure why.

$("#FindLocation").click(function () {
  myScript.findNearbyLocations(displayData, displayError);
});

This click function is not being called twice and I've commented out all the code in displayData and displayError.

findNearbyLocations: function (onSuccess, onFailure) {
  if (navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function (position) {
      alert('This is getting called twice except on the initial call.');
      myScript.findStores(position.coords.latitude, position.coords.longitude, onSuccess, onFailure);
    }, function () {
      onFailure(true);
    });
  }
}

Anyone see where I've gone wrong?

Edit: I don't think the markup is the problem. I'm only using basic webpages for testing. There is no styling or other elements at the moment.

<form id="form1" runat="server">
  <div>      
    <MyControls:Search ID="Search" runat="server" />
  </div>
</form>

and the user control (along with all the necessary javascript includes)

<script type="text/javascript">
  $(document).ready(function () {
    $("#FindLocation").click(function () {
      myScript.findNearbyLocations(displayData, displayError);
    });
  });
</script>

<input type="button" id="FindLocation" value="Find Location" />
<div id="results">
</div>

I have a button where I've hooked the onclick to a call to retrieve the users location and then use the location to make another call to retrieve a list of nearby locations. For some reason the geolocation success method is being called twice on the second click of the button.

So I load the page, click the button, allow permission to use my location, and it will make one ajax request to get the nearby locations. This works fine.

I click the button again, allow permission to use my location (again), it will make one ajax request to get the locations, wait ~2 seconds, and then make another request using the same coordinates without me allowing permission. So the success method has to be getting called twice, but I'm not sure why.

$("#FindLocation").click(function () {
  myScript.findNearbyLocations(displayData, displayError);
});

This click function is not being called twice and I've commented out all the code in displayData and displayError.

findNearbyLocations: function (onSuccess, onFailure) {
  if (navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function (position) {
      alert('This is getting called twice except on the initial call.');
      myScript.findStores(position.coords.latitude, position.coords.longitude, onSuccess, onFailure);
    }, function () {
      onFailure(true);
    });
  }
}

Anyone see where I've gone wrong?

Edit: I don't think the markup is the problem. I'm only using basic webpages for testing. There is no styling or other elements at the moment.

<form id="form1" runat="server">
  <div>      
    <MyControls:Search ID="Search" runat="server" />
  </div>
</form>

and the user control (along with all the necessary javascript includes)

<script type="text/javascript">
  $(document).ready(function () {
    $("#FindLocation").click(function () {
      myScript.findNearbyLocations(displayData, displayError);
    });
  });
</script>

<input type="button" id="FindLocation" value="Find Location" />
<div id="results">
</div>

• javascript
• jquery
• geolocation

• shouldn't onFailure be false on your last line there? – DOK Commented Jan 7, 2011 at 15:58
• @DOK, that would depend on what his onFailure method does with the parameter passed to it. – CaffGeek Commented Jan 7, 2011 at 15:59
• @DOK, no, that function just takes in whether or not the browser supports the navigator.geolocation funcationality. Since we made it into the if statement, I know it is supported, but the user may have denied access to use their location. – Brandon Commented Jan 7, 2011 at 16:00
• Could you possibly inadvertently have two elements on the page with id='FindLocation'? It's not supposed to be allowed to have a duplicate ID, but JQuery copes with it and will run the event for each of them. – Spudley Commented Jan 7, 2011 at 16:02
• @Spudley, afraid not. It's an empty webpage with the basic html/head/body tags, and a user control. No other elements. The user control just contains the one button and a div to dump the results in. – Brandon Commented Jan 7, 2011 at 16:04

4 Answers 4

Could be a bug in the getCurrentPosition of whatever client you are using. In that case you could simply set a flag when the success method is called and not allow the findStores function to be called a 2nd time.

Whenever I have found this happening, it's because I accidentally bound the event to the control twice.

If the code

$("#FindLocation").click(function () {
  myScript.findNearbyLocations(displayData, displayError);
});

happens to be run twice, you will have two identical click events bound, and the action will happen twice.

I faced the same issue, it seems to be a browser bug (tested in Firefox and Safari). I simply verified whether I already had retrieved the same data within a recent timeframe, similar to what is answered here: navigator.geolocation.getCurrentPosition sometimes works sometimes doesn't

More questions in Google but no definitive answer: http://www.google.nl/search?q=geolocation.getCurrentPosition+called+twice&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

this IS happening, and it IS happening with predictable frequency; what I've found in an app I'm working on right now is that when an error is raised and not caught, somewhere in some anonymous function that appears to terminate the current Javascript sessions, that's when it begins happening. It's frustrating and annoying; I know why it's happening, but I don't know where it's happening... yet.

But it is, so just a quick comment that all the "that can't happen" answers aren't terribly accurate or helpful.

Anyway, that's my answer; you may have some inner-function tossing an error that JQuery is quietly eating or something.

$.02