title: Javascript ES6+Jquery: How do I do to call a method of the class from within a success callback function of an ajax request?
body: <p>I'm making a Grid with the new standard ES6 using classes to be able to extend functionality in the future and the jquery method $.ajax. Everything worked great until I started to have scope problems. I want to call a method of the class from within an ajax call. How do I do that?. I tried using <code>this.method()</code>, <code>method()</code>....but no luck.....I also tried to bind the method in the constructor method.....</p>
  
  <pre><code>this.generateGridHeader=this.generateGridHeader.bind(this);
  </code></pre>
  
  <p>without any luck as well....</p>
  
  <p>This is the code, the problem is in the buildGrid() method in the success callback function, the call to generateGridHeader() and generateGridBody().....they are not being recognized....I'm aware that it's not finding them because of the this that is not the right scope, but I don't know how to reference the class methods from within there.....</p>
  
  <p>class Grid{</p>
  
  <pre><code>constructor(gridOptions) {
   this.grid_header='';
   this.grid_body='';
   this.grid='';   
   this.options=gridOptions;
   this.cacheDom();
   //this.bindEvents();
   this.buildGrid();
   //I need to bind them cause I'm going to use them inside a callback function
   //this.generateGridHeader=this.generateGridHeader.bind(this);
   //this.generateGridBody=this.generateGridBody.bind(this);
  }
  
  cacheDom() {
     this.$greeder = $(this.options.selector);
  } 
  
  bindEvents() {
  
  }
  
  buildGrid(){
  
   if(this.options.parameters !== undefined){
      //it's an ajax call
   $.ajax({
          method: "POST",
          url: this.options.data,
          data: $.param(this.options.parameters),
          success: function(data) {
  
              this.generateGridHeader();
  
               this.generateGridBody(data);
  
              // generateGrid(data, options); 
             // styleGrid(options);  //it can be default with bootstrap if the property style is undefined, if the user wants to put his own style he can use style:'custom' parameter
             // generatePager(options);
             // renderGrid(options);
  
          }
      });
  
   }else{
      //it's fixed data from an array or object
      //if typeof == Array parse array
      //if typeof == Object parse object
   }
  
  }
  
    generateGridHeader(){
  
      var fields=this.options.fields;
      var header;
  
      header='&lt;thead&gt;&lt;tr&gt;';
  
       $.each(fields, function(i, item) {
          header+='&lt;th&gt;'+fields[i].title+'&lt;/th&gt;';
        });
  
       header+='&lt;/tr&gt;&lt;/thead&gt;';
       alert(header);
  
      this.header=header;
  }
  
  generateGridBody(data){
  
  } 
  
  styleGrid(){
  
  }    
  
  renderGrid() {
  
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>/* dataType: 'array', 'json'possible values, if parameters is not defined it's array mode*/
  var grid= new Grid({
      title:'The grid',
      selector:'#grid',
      data:'./api/getCustomers.php',
      parameters: {"id_customer":"32"},
      fields:{
          id_customer:{
           title:'ID customer'
          },
          first_name:{
           title:'First Name' 
          },
          last_name:{
           title:'Last Name'  
          }       
      }   
  });
  </code></pre>