|
28 | 28 | </code></pre>
|
29 | 29 | <p>Attach the event handler to any element:</p>
|
30 | 30 | <pre><code>
|
31 |
| -$( document ).on( "ajaxSuccess", function() { |
32 |
| - $( ".log" ).text( "Triggered ajaxSuccess handler." ); |
33 |
| -} ); |
| 31 | + $( document ).on( "ajaxSuccess", function() { |
| 32 | + $( ".log" ).text( "Triggered ajaxSuccess handler." ); |
| 33 | + } ); |
34 | 34 | </code></pre>
|
35 | 35 | <p>Now, make an Ajax request using any jQuery method:</p>
|
36 | 36 | <pre><code>
|
37 |
| -$( ".trigger" ).on( "click", function() { |
38 |
| - $( ".result" ).load( "ajax/test.html" ); |
39 |
| -} ); |
| 37 | + $( ".trigger" ).on( "click", function() { |
| 38 | + $( ".result" ).load( "ajax/test.html" ); |
| 39 | + } ); |
40 | 40 | </code></pre>
|
41 | 41 | <p>When the user clicks the element with class <code>trigger</code> and the Ajax request completes successfully, the log message is displayed.</p>
|
42 | 42 | <p>All <code>ajaxSuccess</code> handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, you can use the parameters passed to the handler. Each time an <code>ajaxSuccess</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>
|
43 | 43 | <pre><code>
|
44 |
| -$( document ).on( "ajaxSuccess", function( event, xhr, settings ) { |
45 |
| - if ( settings.url == "ajax/test.html" ) { |
46 |
| - $( ".log" ).text( "Triggered ajaxSuccess handler. The Ajax response was: " + |
47 |
| - xhr.responseText ); |
48 |
| - } |
49 |
| -} ); |
| 44 | + $( document ).on( "ajaxSuccess", function( event, xhr, settings ) { |
| 45 | + if ( settings.url == "ajax/test.html" ) { |
| 46 | + $( ".log" ).text( "Triggered ajaxSuccess handler. The Ajax response was: " + |
| 47 | + xhr.responseText ); |
| 48 | + } |
| 49 | + } ); |
50 | 50 | </code></pre>
|
51 | 51 | <p><strong>Note:</strong> You can get the returned Ajax contents by looking at <code>xhr.responseXML</code> or <code>xhr.responseText</code> for xml and html respectively.</p>
|
52 | 52 | </longdesc>
|
53 | 53 | <note id="global-ajax-event" type="additional" data-title="ajaxSuccess"/>
|
54 | 54 | <note id="ajax-global-false" type="additional" data-title="ajaxSuccess"/>
|
55 | 55 | <example>
|
56 | 56 | <desc>Show a message when an Ajax request completes successfully.</desc>
|
57 |
| - <code><![CDATA[ |
58 |
| -$( document ).on( "ajaxSuccess< function( event, request, settings ) { |
59 |
| - $( "#msg" ).append( "<li>Successful Request!</li>" ); |
60 |
| -} ); |
61 |
| -]]></code> |
| 57 | + <pre><code> |
| 58 | + $( document ).on( "ajaxSuccess", function( event, request, settings ) { |
| 59 | + $( "#msg" ).append( "<li>Successful Request!</li>" ); |
| 60 | + } ); |
| 61 | + </code></pre> |
62 | 62 | </example>
|
63 | 63 | <category slug="ajax/global-ajax-event-handlers"/>
|
64 | 64 | <category slug="version/1.0"/>
|
|
0 commit comments