Passing a function as a parameter to be used in another function in javascript

Question

I'm wanting to create a system of APIs (within a single object) within javascript all of which stem from jQuery's ajax function but I want to be able to pass an override "success" function to be triggered like so:

function Eidos(){

    this.api = function(data, success){
        $.ajax({
            type: 'POST', 
            url: '/api',
            data: data,
            success: function(rData){
                return rData;
            }
        })
    };

    this.refreshInfo = function(id, success){
            log.info('refreshed page id:  '+ id);
            return this.api({'command': 'refresh', 'pageid': id}, success);
    }


};

In this example, I just want to "refresh" info (pull in new text data or what have you). I already have a sever-side page setup.

And I'd be calling it up like so:

$('.refresh').click(function(){
        $("#myModal").modal('show');
        var id = $(this).data('ei');
        var api = eidos.refreshInfo(id, function(){
                $("#myModal").modal('hide');
                });
        return false;
    });

Obviously this doesn't work (btw, the object was already created via var eidos = new Eidos(); ), however, Idk how to implement it. I want the success: function to behave differently on different pages so I'll need an override but I'm not sure how to make that work here.

pimvdb · Accepted Answer · 2012-08-30 13:24:04Z

4

Try changing

success: function(rData){
   return rData;
}

to

success: success

You're currently not calling (not even using) the success argument.

edited Aug 30, 2012 at 13:24

pimvdb

155k80 gold badges313 silver badges358 bronze badges

answered Aug 30, 2012 at 13:22

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bergi · Accepted Answer · 2012-08-30 13:23:23Z

2

        success: function(rData){
            return rData;
        }

is the problem. You already have a parameter for a callback function, so use it:

        success: function(rData) {
            success(rData);
        }

or, to shorten it, pass the callback function directly into the jQuery ajax as a parameter.

answered Aug 30, 2012 at 13:23

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

jbabey · Accepted Answer · 2012-08-30 13:32:22Z

1

You're not using the success callback anywhere.

this.api = function(data, success){
    $.ajax({
        type: 'POST', 
        url: '/api',
        data: data,
        success: success || function(rData) {
            // some default handler to use if none is passed
        }
    })
};

the success: success || function(rData) { allows your success parameter to be optional; if none is passed, it will use a default handler you specify.

answered Aug 30, 2012 at 13:32

jbabey

46.8k12 gold badges73 silver badges94 bronze badges

1 Comment

antjanus Over a year ago

Thanks! exactly what I was looking for! I just tested it out too. Works 100%! I appreciate it ^.^ My earlier version was just using "success" within function(rData) but I'm guess it should have been success() like someone else said.

epascarello · Accepted Answer · 2012-08-30 13:27:54Z

You are making an asynchronous call and you are acting like it is synchronous. You can not return back from the async call and expect it to return data to where it was called.

this.api = function(data, success){
    $.ajax({
        type: 'POST', 
        url: '/api',
        data: data,
        success: function(rData){
            return rData;  //<-- That return is not going to work
        }
    })
};

If you want to pass in a callback, than assign it.

this.api = function(data, success){
    $.ajax({
        type: 'POST', 
        url: '/api',
        data: data,
        success: success
        }
    })
};

or call it

this.api = function(data, success){
    var that = this;
    $.ajax({
        type: 'POST', 
        url: '/api',
        data: data,
        success: function(rData){
            success(); //<-- call it or you can use apply/call
            //success.apply(that,arguments);
            return rData;  //<-- That return is not going to work
        }
    })
};

Erik Reppen · Accepted Answer · 2012-08-30 13:34:59Z

The way to think of this is that the JQuery ajax function passes rData into your function when it fires it. rData would simply be returning somewhere inside a closed scope inside the jQuery internals where you don't have any control so the place to do something with it is inside that success function.

Or you could signal to something external with another event:

//...
    success:function(rData){
        $(someOtherObject).trigger({type:'rDataDelievered', successData:rData});
    }
}

someOtherObject.bind('rDataDelivered', function(e){ doSomething(e.successData); });

It's not a heavily used feature but yes, you can define a new event on the fly and trigger it on anything you want with jQuery. If you weren't passing the rData object, trigger('rDataDelivered') would suffice for a simple signal. But there's a fair bit of redundancy here. Better to do it in the success function with the ajax event established where appropriate if there's nothing stopping you.

Collectives™ on Stack Overflow

Passing a function as a parameter to be used in another function in javascript

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related