Call a method inside a java-script class from another method inside the same class

Question

I'm trying to make my own class so maintaining could be a lot easier but i have problem, Here is my code :

var SonalScript = function() {
console.log('instance created');
    this.AjaxCall = function(url,data){
      $.post(url,data,function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
          });
}

this.Switches = function(ElemIdentifier) {
    $(ElemIdentifier).bootstrapSwitch();
    $(ElemIdentifier).on('switchChange.bootstrapSwitch', function(event, state) {
        //  console.log( $(this).get('name'));
        var ModuleName = $(this).attr("name");
        var name = $(this).data("name") ;
        var BtnValue = $(this).data("value") ;
        var url = $(this).data("addr") ;
        var BtnResult = '';
        if (state) {
        // data-addr
        // data-name
        // data-value
        // result = True Or False
        BtnResult = 'True';
        //  alert('Enabling : ' + ModuleName );

        } else {
         BtnResult = 'False';
        //  alert('Disabling : ' + ModuleName);
        }

      //  alert(result);

        var data = { name:BtnValue , result : BtnResult };
        console.log(data);
        console.log(url);
        this.AjaxCall(url,data); // << Problem is exactly this line

    });
  }


};

 SonalUtil = new SonalScript();

When I'm trying to call: this.AjaxCall(url,data); then i got this error in Console :

 Uncaught TypeError: undefined is not a function

What do you think ? What makes the error ?

Answer 1

There are two ways you can go about this, one is binding this to the callback, the other is putting this into closure context of the callback funtion. So the first method would be:

...
this.Switches = function(ElemIdentifier) {
    $(ElemIdentifier).bootstrapSwitch();
    $(ElemIdentifier).on('switchChange.bootstrapSwitch', function(event, state) {
        ...
    }.bind(this));
  }
...

And the second would be

....
var self = this;
$(ElemIdentifier).on('switchChange.bootstrapSwitch', function(event, state) {
        //  console.log( $(self).get('name'));
        var ModuleName = $(self).attr("name");
        var name = $(self).data("name") ;
        var BtnValue = $(self).data("value") ;
        var url = $(self).data("addr") ;
        var BtnResult = '';
        if (state) {
        // data-addr
        // data-name
        // data-value
        // result = True Or False
        BtnResult = 'True';
        //  alert('Enabling : ' + ModuleName );

        } else {
         BtnResult = 'False';
        //  alert('Disabling : ' + ModuleName);
        }

      //  alert(result);

        var data = { name:BtnValue , result : BtnResult };
        console.log(data);
        console.log(url);
        self.AjaxCall(url,data); // << Problem is exactly this line

    });
...