CODEWITHSUNDEEP
javascriptjqueryajaxcallback
user736893
user736893

Reputation:

How to pass parameters to callback from ajax function

I'm making ajax calls to an API server. I'm making a specific call to /getobjectdetails/ from multiple places in my code, so I thought I'd try to make it a bit cleaner, but this is the first time I've delved into callbacks like this. Here is the code I attempted:

let api = (function () {
    return {
        getObjectDetails(id, successCallback, errorCallback) {
            $.ajax({
                type: 'GET',
                url: app.apiServerRoot + '/api/getobjectdetails/?Id=' + id,
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Authorization", "Bearer " + user.authToken);
                },
                success: successCallback(data,s,xhrdata),
                error: errorCallback(e)
            });
        }
    }
})();

But when I call this as a test: 

api.getObjectDetails(1008,function(data,s,x){console.log(data)},function(e){console.log(e)})

I get the following error:

Uncaught ReferenceError: data is not defined
    at Object.getObjectDetails (api.js:13)
    at <anonymous>:1:5

What am I doing wrong?

Upvotes: 1

Views: 268

Answers (3)

Chin Leung
Chin Leung

Reputation: 14941

Change your ajax success parameter to:

{
    ...,
    success: successCallback,
    error: errorCallback
}

The way you were doing previously was executing the function directly. You want to pass the reference of the function and not execute it.

For example when you bind a click event, you want to pass the reference:

button.addEventListener('click', myCallback);

And not

button.addEventListener('click', myCallback());

Upvotes: 2

Xeraqu
Xeraqu

Reputation: 193

As the error points out, when you call successCallback, data isn't defined.

Try this:

let api = (function () {
    return {
        getObjectDetails(id, successCallback, errorCallback) {
            $.ajax({
                type: 'GET',
                url: app.apiServerRoot + '/api/getobjectdetails/?Id=' + id,
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Authorization", "Bearer " + user.authToken);
                },
                success: (data, s, xhrdata) => successCallback(data,s,xhrdata),
                error: (e) => errorCallback(e)
            });
        }
    }
})();

There isn't much difference between the arrow function notation and function declaration.

You could write either of these: 

success: (data, s, xhrdata) => successCallback(data, s, xhrdata)

success: (data, s, xhrdata) => { 
    successCallback(data, s, xhrdata); 
}

success: function(data, s, xhrdata) {
    successCallback(data, s, xhrdata);
}

Upvotes: 1

gillyb
gillyb

Reputation: 8910

You need to pass success and error a function. You shouldn't call that function yourself.

When you put the parenthesis after the name of the function, it invokes it immediately. So instead of what you wrote, it should be :

let api = (function () {
return {
    getObjectDetails(id, successCallback, errorCallback) {
        $.ajax({
            type: 'GET',
            url: app.apiServerRoot + '/api/getobjectdetails/?Id=' + id,
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", "Bearer " + user.authToken);
            },
            success: function(data, s, xhrdata) {
                successCallback(data,s,xhrdata);
            },
            error: function(e) {
                errorCallback(e);
            }
        });
    }
}
})();

Upvotes: 0

Related Questions