Passing callback functions as arguments in vanilla JS ajax

Question

I am working on an ajax function to retrieve info from the database. I set up the API and the ajax function does retrieve proper values, but the callback function I passed as an argument won't work on onreadystatechange.

Simplified Code below

function serializeArgs(args) {
  //Serialize Arguments
}
function callback(a) {  //The function to be called as callback
  //Process the response and add contents to the page
}

function getListData(callback) {
  var ajaxOptions = {
    action: "get_data",
  }
  var request = new XMLHttpRequest();
  request.open("POST", apiurl, true);
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
  request.setRequestHeader("Accept-language", "en-US");
  request.onreadystatechange = function(event) {
    if (this.readyState == 4 && this.status == 200) {
      callback(this.response);
    }
  };
  request.send(serializeArgs(ajaxOptions));
}

When I run the function, I get the error "TypeError: callback is not a function"

I have been struggling with this all day, but since I am not that experienced with ajax, I could not figure out why this is happening, and how to solve it. I have a hunch that it has something to do with the asynchronous nature of the ajax, but I'm not sure how I can work around this.

I try so hard but I cry harder · Accepted Answer · 2019-12-29 16:15:43Z

Short reference for this error:

You usually get this error when the following happens:

When a function call is made on a property of that simply isn’t a function.
When a function call is made on an object type that doesn’t contain that function or method.
When a function call is made on a built-in method that expects a callback function argument to be provided, but no such function exists.

I noticed the following in your ajax function:

Your parameter is named callback, just like your function callback. What your ajax function is trying to do is use the parameter callback as a function (not sure if you pass the function callback in as a parameter, if you do, then it's alright, but since I cannot see where you are calling getListData function, I can only guess you are calling it without passing the function callback as an argument).

//Your function callback is trying to access this parameter.
//So unless your actual function callback is being passed in as an argument,
//it's most likely trying to access your parameter even though it is NOT a function or it isn't even receiving a function as parameter
function getListData(callback)
function callback(a)

However if you are trying to simply access it as a function (and not as a callback) i'd recommend changing the parameter name or function name callback.

So to show an example:

First way of doing what you are trying to achieve (callback way). Call your function this way:

getListData(callback)

Or do the following:

function getListData(changedParamName) {
   //this way you can now call your callback function and pass this.response to it
}

That should do the trick.

Andre · Accepted Answer · 2019-12-29 16:01:55Z

1

Where do you call the function getListData?

My guess is, that you call it like getListData() without passing the callback function. if you call it like getListData(callback) it should work. Hard to say what happens without the full code example.

just for testing you also can change the line

function getListData(callback) {

to

function getListData() {

just to see if it works.

In the second szenario, you don't pass the callback, so when you call the callback function, Javascript will look for it in the parent scope.

answered Dec 29, 2019 at 16:01

Andre

4585 silver badges10 bronze badges

Collectives™ on Stack Overflow

Passing callback functions as arguments in vanilla JS ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related