api.jquery.com/entries/ajaxComplete.xml at 8592feba7790c8b6195298192f00f119fdeb3dc0 · jquery/api.jquery.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?xml version="1.0"?>
<entry type="method" name="ajaxComplete" return="jQuery">
  <title>.ajaxComplete()</title>
  <signature>
    <added>1.0</added>
    <argument name="handler" type="Function">
      <argument name="event" type="Event" />
      <argument name="jqXHR" type="jqXHR" />
      <argument name="ajaxOptions" type="PlainObject" />
      <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="/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, set up a basic Ajax load request:</p>
    <pre><code>
&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;
    </code></pre>
    <p>Attach the event handler to the document:</p>
    <pre><code>
$( document ).ajaxComplete(function() {
  $( ".log" ).text( "Triggered ajaxComplete handler." );
});
    </code></pre>
    <p>Now, make an Ajax request using any jQuery method:</p>
    <pre><code>
$( ".trigger" ).click(function() {
  $( ".result" ).load( "ajax/test.html" );
});
    </code></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>As of jQuery 1.8, the <code>.ajaxComplete()</code> method should only be attached to <code>document</code>.</strong></p>
    <p>All <code>ajaxComplete</code> handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, 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, you can restrict the callback to only handling events dealing with a particular URL:</p>
    <pre><code>
$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseText );
  }
});
    </code></pre>
    <p><strong>Note:</strong> You can get the returned ajax contents by looking at <code>xhr.responseText</code>.</p>
  </longdesc>
  <note id="ajax-global-false" type="additional" data-title=".ajaxComplete()"/>
  <example>
    <desc>Show a message when an Ajax request completes.</desc>
    <code><![CDATA[
$( document ).ajaxComplete(function( event,request, settings ) {
  $( "#msg" ).append( "<li>Request Complete.</li>" );
});
]]></code>
  </example>
  <category slug="ajax/global-ajax-event-handlers"/>
  <category slug="version/1.0"/>
</entry>