Pass function reference to a separate Javascript file for callback

Question

I have created a common Javascript file for all my ajax calls. I am trying to use this as a common way to keep track of all ajax calls. Below is the code for the same.

function doAjax(doAjax_params) {
    var url = doAjax_params['url'];
    var requestType = doAjax_params['requestType'];
    var contentType = doAjax_params['contentType'];
    var dataType = doAjax_params['dataType'];
    var data = doAjax_params['data'];
    var beforeSendCallbackFunction = doAjax_params['beforeSendCallbackFunction'];
    var successCallbackFunction = doAjax_params['successCallbackFunction'];
    var completeCallbackFunction = doAjax_params['completeCallbackFunction'];
    var errorCallBackFunction = doAjax_params['errorCallBackFunction'];

       //Make the ajax call
    $.ajax({
        url: getBaseURL() + url,
        crossDomain: true,
        type: requestType,
        contentType: contentType,
        dataType: dataType,
        data: data,
        success: function (data, textStatus, jqXHR) {
            console.log(typeof successCallbackFunction);
            debugger
            //if (typeof successCallbackFunction === "function") {
                successCallbackFunction(data);
            //}
        },
        error: function (jqXHR, textStatus, errorThrown) {
            if (typeof errorCallBackFunction === "function") {
                errorCallBackFunction(errorThrown);
            }

        }
    });
    }

This code takes a list of parameters and creates an ajax request based on the parameteres. This code is saved in a file APIHandler.js.

I am trying to call this function from multiple files. An example call is below.

function RedirectToDashboard() {
    var params = $.extend({}, doAjax_params_default);
    params['url'] = `profile/5`;
    params['successCallbackFunction'] = `testsuccess`
    doAjax(params);

}

function testsuccess() {
    alert("success");
}

When I run this function, I am able to make the call successfully. The only issue comes with the reference to callback function. console.log(typeof successCallbackFunction); returns string instead of function.

I thought maybe order of JS made a difference. I am loading APIHandler.js and then the page specific js. And this ajax call happens at button click, so both JS files are loaded before the ajax call is made.

Other than that, I think maybe I am sending the parameters wrong. That might be causing JS to consider function name as string. But I checked most of the google suggestions on how to pass function, and it seems it needs just the name.

Is there anything else that I might be missing here?

Yeah, I noticed the same after posting. Stupid mistake. Should I leave the question as is, for future reference? — jitendragarg
– jitendragarg, Commented Jan 14, 2019 at 6:12

jitendragarg · Accepted Answer · 2019-01-14 06:10:04Z

2

Damn it. I just figured out why it was causing the error. I used quotes when assigning the callback function. Right after posting the question, I realised what was wrong.

params['successCallbackFunction'] = 'testsuccess'

is supposed to be changed to

params['successCallbackFunction'] = testsuccess

answered Jan 14, 2019 at 6:10

jitendragarg

9552 gold badges16 silver badges56 bronze badges

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

1 Comment

brk Over a year ago

think of Promise

Collectives™ on Stack Overflow

Pass function reference to a separate Javascript file for callback

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related