Thread: JavaScript AJAX callback function not working

Hello,

I've already got one AJAX call working but now I'm venturing into callback territory.

Callbacks aren't supposed to be hard but the tutorials I've seen have left me a little more confused!

Maybe it's just how they work with AJAX that's confusing me.

Anyway, here's my first attempt.

I've set up functions response() and queryURL() to execute the various things that I will be doing upon success/failure and building the relevant URLs.

Code:

/***** AJAX */

function ajax(queryMethod, fileURL, response, queryURL) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    response(xhttp);
  };
  xhttp.open(queryMethod, fileURL, true);
  if (queryMethod == 'POST') {
    xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  }
  queryURL(xhttp);
}

/***** 1st AJAX call */

var searchForm = document.getElementById('searchForm');
var searchTerm = document.getElementById('searchTerm');

searchForm.addEventListener('submit', function(event) {
  searchTermValue = encodeURIComponent(searchTerm.value);
  
  function response() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById('results').innerHTML = xhttp.responseText;
	  activateCopyControl2eventListeners();
	  tooltips();
	  reportICD();
    } else {
      alert("You done errd, fool.");
	}
  }
  
  function queryURL() {
    xhttp.send('searchTerm=' + searchTermValue);
  }
  
  ajax('POST', '../model/search.php');
});

I get these errors with the above code:

Uncaught TypeError: response is not a function
Uncaught TypeError: queryURL is not a function

This is referencing lines:

response(xhttp);

and

queryURL(xhttp);

So, taking a step back, these aren't functions. They should be. They're supposed to be callback functions!

What am I doing wrong?

My original code is:

Code:

<form id="searchForm">
<input type="text" id="searchTerm" placeholder=" . . .">
<input type="submit" id="submit" value="search">
</form>

var searchForm = document.getElementById('searchForm');
var searchTerm = document.getElementById('searchTerm');
var searchTermValue = '';

searchForm.addEventListener('submit', function(event) {
  searchTermValue = encodeURIComponent(searchTerm.value);
  search();
});

function search() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById('results').innerHTML = xhttp.responseText;
	  activateCopyControl2eventListeners();
	  tooltips();
	  reportICD();
    }
  };
  xhttp.open('POST', '../model/search.php', true);
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhttp.send('searchTerm=' + searchTermValue);
}

I guess the reason I'm jumping all over the place is because I want one AJAX function and to pass through it multiple calls, so if one call doesn't respond, others can get through fine and there'll be no queuing, as this page advises - AJAX The XMLHttpRequest onreadystatechange Event (Using a Callback Function)

The activateCopyControl2eventListeners(); and tooltips(); and reportICD(); are functions for use on the AJAX-returned search results. They have no adverse effect on the AJAX call above.

Apologies for not posting the HTML before. Thank you.

Sorted it, this site helped me get to grips with callbacks - Callback Functions in JavaScript | Impressive Webs

Code:

/***** AJAX */

function ajax(queryMethod, fileURL, successOutputTarget, success, failureOutputTarget, failure, queryURL) {
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
	  
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      successOutputTarget.innerHTML = xhttp.responseText;
      success(xhttp);
    } else {
      failureOutputTarget.innerHTML = xhttp.responseText;
      failure(xhttp);
    }

  }

  xhttp.open(queryMethod, fileURL, true);
  
  if (queryMethod == 'POST') {
    xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhttp.send(queryURL);
  } else {
    xhttp.send();
  }
  
}

/***** 1st AJAX call */

var searchForm = document.getElementById('searchForm');
var searchTerm = document.getElementById('searchTerm');

searchForm.addEventListener('submit', function(event) {
  searchTermValue = encodeURIComponent(searchTerm.value);
  var successOutputTarget = document.getElementById('results');
  var failureOutputTarget = '';
  
  ajax('POST', 
  '../model/search.php', 
  successOutputTarget, 
  function success() {
    activateCopyControl2eventListeners();
    tooltips();
    reportICD();
  }, 
  failureOutputTarget, 
  function failure() {
    // do something here upon failure
  }, 
  'searchTerm=' + searchTermValue);
});

Had to set up parameters for output targets because referencing xhttp inside the ajax() call returned xhttp as undefined.