Why is this javascript getting called twice?

Question

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>

@DOK, that would depend on what his `onFailure` method does with the parameter passed to it. — CaffGeek, Jan 07 '11 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, Jan 07 '11 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, Jan 07 '11 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, Jan 07 '11 at 16:04

wosis · Accepted Answer · 2011-01-07T16:18:08.497

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.

edited Jan 07 '11 at 16:18

answered Jan 07 '11 at 16:11

wosis

1,209
10
14

score 2 · Answer 2 · answered Jan 07 '11 at 15:58

2

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.

answered Jan 07 '11 at 15:58

CaffGeek

21,856
17
100
184

I have that code in the document.ready function. I don't believe it is being bound twice. I put an alert before the findNearbyLocations call and it only gets called once each time for the first and subsequent clicks. – Brandon Jan 07 '11 at 16:01

score 2 · Answer 3 · edited May 23 '17 at 12:34

2

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

edited May 23 '17 at 12:34

Community

1
1

answered Jan 07 '11 at 16:16

Jop de Klein

309
2
13

1

+1 for confirming it is a bug. Guess I'll go with wosis' answer and just pass in a flag. Thanks. – Brandon Jan 07 '11 at 16:21

score 0 · Answer 4 · answered May 15 '17 at 18:47

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

Why is this javascript getting called twice?

4 Answers4