CODEWITHSUNDEEP
javascriptajax
K.H.
K.H.

Reputation: 111

Passing callback functions as arguments in vanilla JS ajax

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.

Upvotes: 1

Views: 1098

Answers (2)

I try so hard but I cry harder
I try so hard but I cry harder

Reputation: 705

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.

Upvotes: 2

Andre
Andre

Reputation: 458

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.

Upvotes: 1

Related Questions