ajaxComplete.xml

<entry type='method' name="ajaxComplete" return="jQuery">
  <signature>
    <added>1.0</added>
    <argument name="handler(event, XMLHttpRequest, ajaxOptions)" type="Function">
      <desc>The function to be invoked.</desc>
    </argument>
  </signature>
  <desc>Register a handler to be called when Ajax requests complete. This is an <a href='http://docs.jquery.com/Ajax_Events'>AjaxEvent</a>.</desc>
  <longdesc><p>Whenever an Ajax request completes, jQuery triggers the <code>ajaxComplete</code> event. Any and all handlers that have been registered with the <code>.ajaxComplete()</code> method are executed at this time.</p>
    <p>To observe this method in action, we can set up a basic Ajax load request:</p>
    <pre>&lt;div class="trigger"&gt;Trigger&lt;/div&gt;
&lt;div class="result"&gt;&lt;/div&gt;
&lt;div class="log"&gt;&lt;/div&gt;
</pre>
    <p>We can attach our event handler to any element:</p>
    <pre>$('.log').ajaxComplete(function() {
  $(this).text('Triggered ajaxComplete handler.');
});
</pre>
    <p>Now, we can make an Ajax request using any jQuery method:</p>
    <pre>$('.trigger').click(function() {
  $('.result').load('ajax/test.html');
});</pre>
    <p>When the user clicks the element with class <code>trigger</code> and the Ajax request completes, the log message is displayed.</p>

    <p><strong>Note:</strong> Because <code>.ajaxComplete()</code> is implemented as a method of jQuery object instances, we can use the <code>this</code> keyword as we do here to refer to the selected elements within the callback function.</p>

    <p>All <code>ajaxComplete</code> handlers are invoked, regardless of what Ajax request was completed. If we must differentiate between the requests, we can use the parameters passed to the handler. Each time an <code>ajaxComplete</code> handler is executed, it is passed the event object, the <code>XMLHttpRequest</code> object, and the settings object that was used in the creation of the request. For example, we can restrict our callback to only handling events dealing with a particular URL:</p>

    <p><strong>Note:</strong> You can get the returned ajax contents by looking at <code>xhr.responseXML</code> or <code>xhr.responseHTML</code> for xml and html respectively.</p>

    <pre>$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxComplete handler. The result is ' +
                     xhr.responseHTML);
  }
});</pre></longdesc>
<example>
  <desc>Show a message when an Ajax request completes.</desc>
  <code><![CDATA[$("#msg").ajaxComplete(function(event,request, settings){
   $(this).append("<li>Request Complete.</li>");
 });]]></code>
</example>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
</entry>