Javascript call class method in other function

Question

I was trying to call a function inside a class function. Like the following code. I want to call addMarks in my init() function. But it threw this error

$.get(...).bind is not a function

class MapManager {
  init(){
    $('#search').click(function(event) {
      if(start && destination){
        $.get('routes/search', {data: 123}, function(data, textStatus, xhr) {
          this.addMarks(data.data);
        }).bind(this);
      }
    });
  }

  addMarks(locations){
    ...
  }
}

You can only call `.bind` on another function. `$.get` returns a jqXHR object. https://api.jquery.com/jquery.get/ — Matthew Herbst, Oct 05 '18 at 02:26
Have a look at [How to access the correct `this` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Felix Kling, Oct 05 '18 at 02:38

choz · Accepted Answer · 2018-10-05T02:31:07.627

You're binding this to $.get there, instead of the successFn.

Or else, you can always assign this beforehand and access it inside the successFn scope.

E.g.

class MapManager {
  init(){
    let self = this; // <-- assign it here

    $('#search').click(function(event) {
      if(start && destination){
        $.get('routes/search', {data: 123}, function(data, textStatus, xhr) {
          // Yes! I can access 'self' here because it is defined where I am defined.
          self.addMarks(data.data);
        });
      }
    });
  }

  addMarks(locations){
    console.log(":: addMarks");
  }
}

score 0 · Answer 2 · answered Oct 05 '18 at 03:43

since you're using class so therefore modern javascript, you can forget bind altogether, using arrow function notation

class MapManager {
  init(){
    $('#search').click((event) => {
      if(start && destination){
        $.get('routes/search', {data: 123}, (data, textStatus, xhr) => {
          this.addMarks(data.data);
        });
      }
    });
  }

  addMarks(locations){
    ...
  }
}

Javascript call class method in other function

2 Answers2