Calling functions outside of jQuery ajax success callback?

Question

How would I call a function outside of my jQuery AJAX? I'm assuming I need to bind this, but I'm not sure where or how many times.

mylib = {
        do_the_ajax: function(data){
                $.ajax({
                        url: "the_internet",
                        method: "DELETE",
                        data: JSON.stringify(data),
                        success: function() {
                                do_the_other_thing(); // How can I call this?
                        },  
                        error: function() {
                                console.log("YOU FAIL!");
                        }   
                }); 
        },  
        do_the_other_thing: function() {
                console.log("WHAT THE FOX SAY");
        }   
}

I'm trying to call do_the_other_thing inside do_the_ajax. Inside do_the_ajax, I could call this.do_the_other_thing(), but I'm not sure how I would call that inside the ajax success callback or what binding would be necessary.

you can declare a var referenced to `this` like `var _this=this`, inside the function `do_the_ajax` before the ajax call... then you can call `_this.do_the_other_thing()` — Alessandro, Mar 07 '18 at 21:05
if `success` is an arrow function and `do_the_ajax` remains a normal function expression like you have now, you can call `this.do_the_other_thing()` assuming that `do_the_ajax()` is always called with dot notation, e.g. `mylib.do_the_ajax()` rather than just `do_the_ajax()` — Patrick Roberts, Mar 07 '18 at 21:08

score 1 · Accepted Answer · answered Mar 07 '18 at 21:09

If you need to execute some logic before to call the function do_the_other_thing then pass it as callback from the main call.

var obj = {
    mylib: {
        do_the_ajax: function(data, cb){
            $.ajax({
                    url: "the_internet",
                    method: "DELETE",
                    data: JSON.stringify(data),
                    success: function() {
                        // Execute previous logic.
                        cb(); // This will call 'do_the_other_thing()'
                    },  
                    error: function() {
                        console.log("YOU FAIL!");
                    }   
            }); 
        },  
        do_the_other_thing: function() {
            console.log("WHAT THE FOX SAY");
        }
    }   
}
                                      +----- Pass the function 'do_the_other_thing()'
                                      |
                                      v
obj.mylib.do_the_ajax(data, obj.mylib.do_the_other_thing);

score 0 · Answer 2 · answered Mar 07 '18 at 21:05

You need to bind the refrence this like you said. or use ()=> arrow functions which will do the auto bind.

here should be a usefull link: Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?

So Im not sure if this is you case but something like this should help:

function someFuntion(){
  var myLib = {
        do_the_ajax: (data)=>{
            $.ajax({
                    url: "the_internet",
                    method: "DELETE",
                    data: JSON.stringify(data),
                    success: myLib.do_the_other_thing
                    error: function() {
                            console.log("YOU FAIL!");
                    }   
            }); 
        },  
        do_the_other_thing: function(res) {
                console.log("WHAT THE FOX SAY");
        }   
  }
}

or something like this:

function someFuntion(){
  var myLib = {
        do_the_ajax: (data)=>{
            $.ajax({
                    url: "the_internet",
                    method: "DELETE",
                    data: JSON.stringify(data),
                    success: (res)=>{
                         myLib.do_the_other_thing(res)
                    }
                    error: function() {
                            console.log("YOU FAIL!");
                    }   
            }); 
        },  
        do_the_other_thing: function(res) {
                console.log("WHAT THE FOX SAY");
        }   
  }
}

Calling functions outside of jQuery ajax success callback?

2 Answers2