Question

How do I trigger a function when an AJAX response is complete?

On change of the drop down the manageImagesDynamicObjectDetails function is called:

<select id="imageComponentSelection" name="imageComponentSelection" onchange="manageImagesDynamicObjectDetails()">

This function passes variables related to this AJAX call to my makeRequests function.

function manageImagesDynamicObjectDetails(){
  var sendContent = "selection=".concat(document.getElementById('imageComponentSelection').value);
  var fileName = "RetrieveObjectsInformation";
  var elementId = "objectData";
  if(sendContent != "Select a class to view components"){
  makeRequest(fileName,sendContent,elementId);
  } 
}

makeRequest is a function which will be called for all AJAX calls and deals with them appropriately.

function makeRequest(fileName,sendContent,elementId) {
 var xmlHttpRequest = getXMLHttpRequest();
 xmlHttpRequest.onreadystatechange = getReadyStateHandler(xmlHttpRequest,elementId);
 xmlHttpRequest.open("POST", fileName, true);
 xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlHttpRequest.send(sendContent);
}

When the speicif AJAX call is complete I want to call the resizeObjectList function.

function resizeObjectList(){
  var windowHeight = $('#contentWrapper').height();
  var newObjectListHeight = windowHeight - 53 - 20 - 20 - 60;
  var element =  document.getElementById("componentObjectList");
  if (typeof(element) != 'undefined' && element != null){
    document.getElementById("componentObjectList").style.height = newObjectListHeight;
  }
}

How do I do this? I’ve tried ajaxComplete and ajaxStop but I could not get them to trigger.

Answer 1

I beleive you want somthing like:
response = xmlHttpRequest.responseText;

bute the above works if you make ajax async. read: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

if you use jquery, it makes ajax a lot more simple: http://api.jquery.com/jQuery.ajax/

here is an example:

$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  type: "GET"
  data: "key0=val0&key1-val1"
}).done(function( data ) {
  alert(data)
});