title: ajaxComplete - how to call/trigger?
body: <p>How do I trigger a function when an AJAX response is complete?</p>
  
  <p>On change of the drop down the <code>manageImagesDynamicObjectDetails</code> function is called:</p>
  
  <pre><code>&lt;select id="imageComponentSelection" name="imageComponentSelection" onchange="manageImagesDynamicObjectDetails()"&gt;
  </code></pre>
  
  <p>This function passes variables related to this AJAX call to my <code>makeRequests</code> function.</p>
  
  <pre><code>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);
    } 
  }
  </code></pre>
  
  <p><code>makeRequest</code> is a function which will be called for all AJAX calls and deals with them appropriately.  </p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>When the speicif AJAX call is complete I want to call the resizeObjectList function.</p>
  
  <pre><code>function resizeObjectList(){
    var windowHeight = $('#contentWrapper').height();
    var newObjectListHeight = windowHeight - 53 - 20 - 20 - 60;
    var element =  document.getElementById("componentObjectList");
    if (typeof(element) != 'undefined' &amp;&amp; element != null){
      document.getElementById("componentObjectList").style.height = newObjectListHeight;
    }
  }
  </code></pre>
  
  <p>How do I do this? I've tried <code>ajaxComplete</code> and <code>ajaxStop</code> but I could not get them to trigger.</p>