external function does not fire callback ajax call

Webix JS
#1

Hello,
I have this problem.

I have defined a local function to load data into a grid.

Every time I call the loadGrid() function, i get the ajax call, but all the code inside the “then” is not processed.

If I put the code into the init it works correctly…
why?

init(){
  this.on(this.app, "search:flight", formData => {
      this.loadGrid(formData);
    });
}

loadGrid(params){
  grid.load(function(){
      return webix.ajax().get("http://localhost:8081/data/flights.json", params);
    }).then(
      function(data){   // not processed
        webix.message('data loaded'); 
        this.gridData = data.json();
        grid.sort("sta_std", "asc", "date");
      });
}




init(){
  this.on(this.app, "search:flight", formData => {
      grid.load(function(){
      return webix.ajax().get("http://localhost:8081/data/flights.json", formData);
    }).then(
      function(data){   // processed
        webix.message('data loaded'); 
        this.gridData = data.json();
        grid.sort("sta_std", "asc", "date");
      });
    });
}
#2

try to convert classic function to arrow function

      function(data){   // not processed
        webix.message('data loaded'); 
        this.gridData = data.json();
        grid.sort("sta_std", "asc", "date");
      }

will be

      (data) => {   // should be processed
        webix.message('data loaded'); 
        this.gridData = data.json();
        grid.sort("sta_std", "asc", "date");
      }
#3

mhh it works, cannot totally understand the difference …
but thank you as usual @intregal :slight_smile: