Geolocation getCurrentPosition callback error

[Ubaidul Khan]

I am working HTML/JavaScript app that reads gps coordinates from the device. The issue I am having is that I get the following error:

    Uncaught TypeError: Failed to execute 'getCurrentPosition' on 'Geolocation': The callback provided as parameter 1 is not a function.

Here is the JavaScript:

    var app = {

    

      position: null,

    

      // Application Constructor

      initialize: function() {

        alert("app.initialize invoked");

        console.log("Initializing google map");

        $(document).ready(this.onDeviceReady); 

      },

    

    

      // Execute on success - when calling this function invoke with this. prefixed

      onSuccess: function() 

      {

        alert("app.onSuccess invoked");

        var lat = geolocation.coords.latitude;

        var lng = geolocation.coords.longitude;

        localStorage.setItem("Latitude", lat);

        localStorage.setItem("Longitude", lng);

        alert("lat: " + lat + "long: " + lng);

      },

      

      // Execute on failure - when calling this function invoke with this. prefixed

      onError: function() 

      {

        alert("Code: " + error.message);

      },

      

    

      // Execute on deviceReady - when calling this function invoke with this. prefixed

      onDeviceReady: function() 

      {

        alert("app.onDeviceReady invoked");

        var options = { enableHighAccuracy: true };

        alert("app.onDeviceReady invoked +2");

        

        //<------------------- vv Does not work vvv -------------------

        navigator.geolocation.watchPosition(this.onSuccess, this.onError, options);

        alert("app.onDeviceReady invoked +3");

    

      },

      

     

      

      // Attach google map to div

      showGoogleMap: function() 

      {

    

      } 

     

    };

    

    function onLoad() {

      alert("onLoad invoked");

      app.initialize();

    }

So it doesn't like the way I am registering the callback function - this.onSuccess.  How should I fix this?  Any ideas?

Thanks

[Jesse Monroy]

DO NOT USE this. it is an inherent bad part of Javascript.

this is bound at "invocation time". So this why it is NOT DOING what you think.

Watch this video (1hr 49min), Sorry i do not have this indexed yet, but fast forward to 46:30 and pay attention to Prototypal Inheritance

Douglas Crockford: The JavaScript Programming Language
https://www.youtube.com/watch?v=v2ifWcnQs6M

This is good to watch.
Douglas Crockford Lectures on JavaScript (14+)
https://www.youtube.com/watch?v=v2ifWcnQs6M&list=PL62E185BB8577B63D

Jesse

[Kerri Shotts]

You're assuming that `this` points to the object on which the methods are defined. It doesn't. `this` is really more about calling context (unless you're using ES6 and using => to lexically bind `this`).

Where you have 

    $(document).ready(this.onDeviceReady); 

you might want to have

    $(document).ready(this.onDeviceReady.bind(this));

Alternatively, where you have 

    navigator.geolocation.watchPosition(this.onSuccess, this.onError, options);

you could use (as onLoad does)

    navigator.geolocation.watchPosition(app.onSuccess, app.onError, options);

Either one should fix the immediate issue.

But for the future, you really need to learn how `this` works in JavaScript. It's /not/ equivalent in any way to `self` or `my` or any of the other constructs you might be familiar with in other languages. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this has more information.

[Ubaidul Khan]

Thank you Karri for pointing that out.  I will definitely brush on the *this* operator.