Permalink
Browse files

Add <code> tags inside all <pre> tags that contain code examples.

  • Loading branch information...
1 parent 6e1aef9 commit e3addc07faecc8cc77c901f48b8a567b73beded2 @kborchers kborchers committed Jun 23, 2012
Showing with 831 additions and 828 deletions.
  1. +4 −4 entries/addClass.xml
  2. +17 −17 entries/after.xml
  3. +8 −8 entries/ajaxComplete.xml
  4. +8 −8 entries/ajaxError.xml
  5. +8 −8 entries/ajaxSend.xml
  6. +6 −6 entries/ajaxStart.xml
  7. +6 −6 entries/ajaxStop.xml
  8. +8 −8 entries/ajaxSuccess.xml
  9. +4 −4 entries/andSelf.xml
  10. +10 −10 entries/animate.xml
  11. +12 −12 entries/append.xml
  12. +10 −10 entries/appendTo.xml
  13. +8 −8 entries/attr.xml
  14. +11 −11 entries/before.xml
  15. +14 −14 entries/bind.xml
  16. +4 −4 entries/blur.xml
  17. +2 −1 entries/callbacks.add.xml
  18. +2 −2 entries/callbacks.disable.xml
  19. +2 −2 entries/callbacks.empty.xml
  20. +2 −2 entries/callbacks.fire.xml
  21. +2 −2 entries/callbacks.fireWith.xml
  22. +2 −2 entries/callbacks.fired.xml
  23. +6 −6 entries/change.xml
  24. +3 −3 entries/children.xml
  25. +6 −6 entries/click.xml
  26. +10 −10 entries/clone.xml
  27. +8 −8 entries/closest.xml
  28. +4 −4 entries/contents.xml
  29. +2 −2 entries/css.xml
  30. +11 −11 entries/data.xml
  31. +6 −6 entries/dblclick.xml
  32. +1 −1 entries/delay.xml
  33. +6 −6 entries/delegate.xml
  34. +4 −4 entries/each.xml
  35. +5 −5 entries/empty.xml
  36. +6 −6 entries/end.xml
  37. +8 −8 entries/eq.xml
  38. +3 −3 entries/error.xml
  39. +2 −2 entries/fadeIn.xml
  40. +4 −4 entries/fadeOut.xml
  41. +2 −2 entries/fadeTo.xml
  42. +10 −8 entries/filter.xml
  43. +7 −7 entries/find.xml
  44. +3 −3 entries/first.xml
  45. +6 −6 entries/focus.xml
  46. +6 −6 entries/get.xml
  47. +3 −3 entries/has.xml
  48. +4 −4 entries/hasClass.xml
  49. +2 −2 entries/height.xml
  50. +4 −4 entries/hide.xml
  51. +2 −2 entries/hover.xml
  52. +12 −12 entries/html.xml
  53. +11 −11 entries/index.xml
  54. +8 −8 entries/insertAfter.xml
  55. +8 −8 entries/insertBefore.xml
  56. +8 −8 entries/is.xml
  57. +24 −24 entries/jQuery.Callbacks.xml
  58. +19 −19 entries/jQuery.ajax.xml
  59. +10 −10 entries/jQuery.ajaxPrefilter.xml
  60. +4 −4 entries/jQuery.ajaxSetup.xml
  61. +12 −12 entries/jQuery.ajaxTransport.xml
  62. +4 −4 entries/jQuery.data.xml
  63. +4 −4 entries/jQuery.each.xml
  64. +1 −1 entries/jQuery.extend.xml
  65. +6 −6 entries/jQuery.get.xml
  66. +8 −8 entries/jQuery.getJSON.xml
  67. +11 −11 entries/jQuery.getScript.xml
  68. +2 −2 entries/jQuery.isPlainObject.xml
  69. +1 −1 entries/jQuery.merge.xml
  70. +4 −4 entries/jQuery.noConflict.xml
  71. +6 −6 entries/jQuery.param.xml
  72. +6 −6 entries/jQuery.post.xml
  73. +4 −4 entries/jQuery.when.xml
  74. +21 −21 entries/jQuery.xml
  75. +6 −6 entries/keydown.xml
  76. +6 −6 entries/keypress.xml
  77. +6 −6 entries/keyup.xml
  78. +3 −3 entries/last.xml
  79. +4 −4 entries/live.xml
  80. +3 −3 entries/load-event.xml
  81. +8 −8 entries/load.xml
  82. +4 −4 entries/map.xml
  83. +6 −6 entries/mousedown.xml
  84. +6 −6 entries/mouseenter.xml
  85. +6 −6 entries/mouseleave.xml
  86. +6 −6 entries/mousemove.xml
  87. +6 −6 entries/mouseout.xml
  88. +6 −6 entries/mouseover.xml
  89. +6 −6 entries/mouseup.xml
  90. +3 −3 entries/next.xml
  91. +3 −3 entries/nextAll.xml
  92. +7 −7 entries/not.xml
  93. +3 −3 entries/offsetParent.xml
  94. +8 −8 entries/on.xml
  95. +4 −4 entries/one.xml
  96. +3 −3 entries/parent.xml
  97. +3 −3 entries/parents.xml
  98. +10 −10 entries/prepend.xml
  99. +8 −8 entries/prependTo.xml
  100. +3 −3 entries/prev.xml
  101. +3 −3 entries/prevAll.xml
  102. +4 −4 entries/prop.xml
  103. +7 −7 entries/queue.xml
  104. +6 −6 entries/ready.xml
  105. +8 −8 entries/remove.xml
  106. +2 −2 entries/removeAttr.xml
  107. +4 −4 entries/removeClass.xml
  108. +8 −8 entries/replaceAll.xml
  109. +14 −14 entries/replaceWith.xml
  110. +2 −2 entries/resize.xml
  111. +6 −6 entries/scroll.xml
  112. +6 −6 entries/select.xml
  113. +5 −5 entries/serialize.xml
  114. +6 −6 entries/serializeArray.xml
  115. +4 −4 entries/show.xml
  116. +3 −3 entries/siblings.xml
  117. +4 −4 entries/size.xml
  118. +5 −5 entries/slice.xml
  119. +4 −4 entries/slideDown.xml
  120. +4 −4 entries/slideToggle.xml
  121. +4 −4 entries/slideUp.xml
  122. +4 −4 entries/stop.xml
  123. +6 −6 entries/submit.xml
  124. +2 −2 entries/text-selector.xml
  125. +11 −11 entries/text.xml
  126. +1 −1 entries/toArray.xml
  127. +4 −4 entries/toggle-event.xml
  128. +8 −8 entries/toggle.xml
  129. +10 −10 entries/toggleClass.xml
  130. +4 −4 entries/trigger.xml
  131. +12 −12 entries/unbind.xml
  132. +2 −2 entries/unload.xml
  133. +6 −6 entries/val.xml
  134. +2 −2 entries/width.xml
  135. +9 −9 entries/wrap.xml
  136. +5 −5 entries/wrapAll.xml
  137. +11 −11 entries/wrapInner.xml
View
@@ -17,14 +17,14 @@
<longdesc>
<p>It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.</p>
<p>More than one class may be added at a time, separated by a space, to the set of matched elements, like so:</p>
- <pre>$("p").addClass("myClass yourClass");</pre>
+ <pre><code>$("p").addClass("myClass yourClass");</code></pre>
<p>This method is often used with <code>.removeClass()</code> to switch elements' classes from one to another, like so:</p>
- <pre>$("p").removeClass("myClass noClass").addClass("yourClass");</pre>
+ <pre><code>$("p").removeClass("myClass noClass").addClass("yourClass");</code></pre>
<p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
<p>As of jQuery 1.4, the <code>.addClass()</code> method's argument can receive a function.</p>
- <pre>$("ul li:last").addClass(function(index) {
+ <pre><code>$("ul li:last").addClass(function(index) {
return "item-" + index;
-});</pre>
+});</code></pre>
<p>Given an unordered list with five <code>&lt;li&gt;</code> elements, this example adds the class "item-4" to the last <code>&lt;li&gt;</code>.</p>
</longdesc>
<example>
View
@@ -20,58 +20,58 @@
<longdesc>
<p>The <code>.after()</code> and <code><a href="/insertAfter">.insertAfter()</a></code> methods perform the same task. The major difference is in the syntax&#x2014;specifically, in the placement of the content and target. With<code> .after()</code>, the selector expression preceding the method is the container after which the content is inserted. With <code>.insertAfter()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.</p>
<p>Using the following HTML:</p>
- <pre>&lt;div class="container"&gt;
+ <pre><code>&lt;div class="container"&gt;
&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="inner"&gt;Hello&lt;/div&gt;
&lt;div class="inner"&gt;Goodbye&lt;/div&gt;
-&lt;/div&gt;</pre>
+&lt;/div&gt;</code></pre>
<p>Content can be created and then inserted after several elements at once:</p>
- <pre>$('.inner').after('&lt;p&gt;Test&lt;/p&gt;');</pre>
+ <pre><code>$('.inner').after('&lt;p&gt;Test&lt;/p&gt;');</code></pre>
<p>Each inner <code>&lt;div&gt;</code> element gets this new content:</p>
- <pre>&lt;div class="container"&gt;
+ <pre><code>&lt;div class="container"&gt;
&lt;h2&gt;Greetings&lt;/h2&gt;
&lt;div class="inner"&gt;Hello&lt;/div&gt;
&lt;p&gt;Test&lt;/p&gt;
&lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;p&gt;Test&lt;/p&gt;
-&lt;/div&gt;</pre>
+&lt;/div&gt;</code></pre>
<p>An element in the DOM can also be selected and inserted after another element:</p>
- <pre>$('.container').after($('h2'));</pre>
+ <pre><code>$('.container').after($('h2'));</code></pre>
<p>If an element selected this way is inserted elsewhere, it will be moved rather than cloned:</p>
- <pre>&lt;div class="container"&gt;
+ <pre><code>&lt;div class="container"&gt;
&lt;div class="inner"&gt;Hello&lt;/div&gt;
&lt;div class="inner"&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;
-&lt;h2&gt;Greetings&lt;/h2&gt;</pre>
+&lt;h2&gt;Greetings&lt;/h2&gt;</code></pre>
<p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
<h4 id="disconnected-dom-nodes">Inserting Disconnected DOM nodes</h4>
<p>As of jQuery 1.4, <code>.before()</code> and <code>.after()</code> will also work on disconnected DOM nodes. For example, given the following code:</p>
- <pre>$('&lt;div/&gt;').after('&lt;p&gt;&lt;/p&gt;');</pre>
+ <pre><code>$('&lt;div/&gt;').after('&lt;p&gt;&lt;/p&gt;');</code></pre>
<p>The result is a jQuery set containing a div and a paragraph, in that order. That set can be further manipulated, even before it is inserted in the document.</p>
- <pre>$('&lt;div/&gt;').after('&lt;p&gt;&lt;/p&gt;').addClass('foo')
+ <pre><code>$('&lt;div/&gt;').after('&lt;p&gt;&lt;/p&gt;').addClass('foo')
.filter('p').attr('id', 'bar').html('hello')
.end()
-.appendTo('body');</pre>
+.appendTo('body');</code></pre>
<p>This results in the following elements inserted just before the closing <code>&lt;/body&gt;</code> tag:</p>
- <pre>
+ <pre><code>
&lt;div class="foo"&gt;&lt;/div&gt;
&lt;p class="foo" id="bar"&gt;hello&lt;/p&gt;
-</pre>
+</code></pre>
<h4 id="passing-a-function">Passing a Function</h4>
<p>As of jQuery 1.4, <code>.after()</code> supports passing a function that returns the elements to insert.</p>
- <pre>$('p').after(function() {
+ <pre><code>$('p').after(function() {
return '&lt;div&gt;' + this.className + '&lt;/div&gt;';
-});</pre>
+});</code></pre>
<p>This example inserts a <code>&lt;div&gt;</code> after each paragraph, with each new <code>&lt;div&gt;</code> containing the class name(s) of its preceding paragraph.</p>
<h4 id="additional-arguments">Additional Arguments</h4>
<p>Similar to other content-adding methods such as <code><a href="http://api.jquery.com/prepend/">.prepend()</a></code> and <code><a href="http://api.jquery.com/before/">.before()</a></code>, <code>.after()</code> also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.</p>
<p>For example, the following will insert two new <code>&lt;div&gt;</code>s and an existing <code>&lt;div&gt;</code> after the first paragraph:</p>
- <pre>var $newdiv1 = $('&lt;div id="object1"/&gt;'),
+ <pre><code>var $newdiv1 = $('&lt;div id="object1"/&gt;'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
$('p').first().after($newdiv1, [newdiv2, existingdiv1]);
-</pre>
+</code></pre>
<p>Since <code>.after()</code> can accept any number of additional arguments, the same result can be achieved by passing in the three <code>&lt;div&gt;</code>s as three separate arguments, like so: <code>$('p').first().after($newdiv1, newdiv2, existingdiv1)</code>. The type and number of arguments will largely depend on the elements that are collected in the code.</p>
</longdesc>
<example>
View
@@ -11,29 +11,29 @@
<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;
+ <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;
-</pre>
+</code></pre>
<p>We can attach our event handler to any element:</p>
- <pre>$('.log').ajaxComplete(function() {
+ <pre><code>$('.log').ajaxComplete(function() {
$(this).text('Triggered ajaxComplete handler.');
});
-</pre>
+</code></pre>
<p>Now, we can make an Ajax request using any jQuery method:</p>
- <pre>$('.trigger').click(function() {
+ <pre><code>$('.trigger').click(function() {
$('.result').load('ajax/test.html');
-});</pre>
+});</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>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) {
+ <pre><code>$('.log').ajaxComplete(function(e, xhr, settings) {
if (settings.url == 'ajax/test.html') {
$(this).text('Triggered ajaxComplete handler. The result is ' +
xhr.responseHTML);
}
-});</pre>
+});</code></pre>
</longdesc>
<example>
<desc>Show a message when an Ajax request completes.</desc>
View
@@ -11,25 +11,25 @@
<longdesc>
<p>Whenever an Ajax request completes with an error, jQuery triggers the <code>ajaxError</code> event. Any and all handlers that have been registered with the <code>.ajaxError()</code> method are executed at this time.</p>
<p>To observe this method in action, set up a basic Ajax load request.</p>
- <pre>&lt;button class="trigger"&gt;Trigger&lt;/button&gt;
+ <pre><code>&lt;button class="trigger"&gt;Trigger&lt;/button&gt;
&lt;div class="result"&gt;&lt;/div&gt;
-&lt;div class="log"&gt;&lt;/div&gt;</pre>
+&lt;div class="log"&gt;&lt;/div&gt;</code></pre>
<p>Attach the event handler to any element:</p>
- <pre>$("div.log").ajaxError(function() {
+ <pre><code>$("div.log").ajaxError(function() {
$(this).text( "Triggered ajaxError handler." );
-});</pre>
+});</code></pre>
<p>Now, make an Ajax request using any jQuery method:</p>
- <pre>$("button.trigger").click(function() {
+ <pre><code>$("button.trigger").click(function() {
$("div.result").load( "ajax/missing.html" );
-});</pre>
+});</code></pre>
<p>When the user clicks the button and the Ajax request fails, because the requested file is missing, the log message is displayed.</p>
<p><strong>Note:</strong> Because <code>.ajaxError()</code> is implemented as a method of jQuery object instances, you can use the <code>this</code> keyword within the callback function to refer to the selected elements.</p>
<p>All <code>ajaxError</code> handlers are invoked, regardless of what Ajax request was completed. To differentiate between the requests, you can use the parameters passed to the handler. Each time an <code>ajaxError</code> handler is executed, it is passed the event object, the <code>jqXHR</code> object (prior to jQuery 1.5, the <code><abbr title="XMLHttpRequest">XHR</abbr></code> object), and the settings object that was used in the creation of the request. If the request failed because JavaScript raised an exception, the exception object is passed to the handler as a fourth parameter. For example, to restrict the error callback to only handling events dealing with a particular URL:</p>
- <pre>$( "div.log" ).ajaxError(function(e, jqxhr, settings, exception) {
+ <pre><code>$( "div.log" ).ajaxError(function(e, jqxhr, settings, exception) {
if ( settings.url == "ajax/missing.html" ) {
$(this).text( "Triggered ajaxError handler." );
}
-});</pre>
+});</code></pre>
</longdesc>
<example>
<desc>Show a message when an Ajax request fails.</desc>
View
@@ -11,25 +11,25 @@
<longdesc>
<p>Whenever an Ajax request is about to be sent, jQuery triggers the <code>ajaxSend</code> event. Any and all handlers that have been registered with the <code>.ajaxSend()</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;
+ <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;</pre>
+&lt;div class="log"&gt;&lt;/div&gt;</code></pre>
<p>We can attach our event handler to any element:</p>
- <pre>$('.log').ajaxSend(function() {
+ <pre><code>$('.log').ajaxSend(function() {
$(this).text('Triggered ajaxSend handler.');
-});</pre>
+});</code></pre>
<p>Now, we can make an Ajax request using any jQuery method:</p>
- <pre>$('.trigger').click(function() {
+ <pre><code>$('.trigger').click(function() {
$('.result').load('ajax/test.html');
-});</pre>
+});</code></pre>
<p>When the user clicks the element with class <code>trigger</code> and the Ajax request is about to begin, the log message is displayed.</p>
<p><strong>Note:</strong> Because <code>.ajaxSend()</code> is implemented as a method of jQuery 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>ajaxSend</code> handlers are invoked, regardless of what Ajax request is to be sent. If we must differentiate between the requests, we can use the parameters passed to the handler. Each time an <code>ajaxSend</code> handler is executed, it is passed the event object, the <code>jqXHR</code> object (in version 1.4, <code>XMLHttpRequest</code>object), and the <a href="http://api.jquery.com/jQuery.ajax/">settings object</a> that was used in the creation of the Ajax request. For example, we can restrict our callback to only handling events dealing with a particular URL:</p>
- <pre>$('.log').ajaxSend(function(e, jqxhr, settings) {
+ <pre><code>$('.log').ajaxSend(function(e, jqxhr, settings) {
if (settings.url == 'ajax/test.html') {
$(this).text('Triggered ajaxSend handler.');
}
-});</pre>
+});</code></pre>
</longdesc>
<example>
<desc>Show a message before an Ajax request is sent.</desc>
View
@@ -11,17 +11,17 @@
<longdesc>
<p>Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the <code>ajaxStart</code> event. Any and all handlers that have been registered with the <code>.ajaxStart()</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;
+ <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;</pre>
+&lt;div class="log"&gt;&lt;/div&gt;</code></pre>
<p>We can attach our event handler to any element:</p>
- <pre>$('.log').ajaxStart(function() {
+ <pre><code>$('.log').ajaxStart(function() {
$(this).text('Triggered ajaxStart handler.');
-});</pre>
+});</code></pre>
<p>Now, we can make an Ajax request using any jQuery method:</p>
- <pre>$('.trigger').click(function() {
+ <pre><code>$('.trigger').click(function() {
$('.result').load('ajax/test.html');
-});</pre>
+});</code></pre>
<p>When the user clicks the element with class <code>trigger</code> and the Ajax request is sent, the log message is displayed.</p>
<p><strong>Note:</strong> Because <code>.ajaxStart()</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>
</longdesc>
View
@@ -11,17 +11,17 @@
<longdesc>
<p>Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the <code>ajaxStop</code> event. Any and all handlers that have been registered with the <code>.ajaxStop()</code> method are executed at this time. The <code>ajaxStop</code> event is also triggered if the last outstanding Ajax request is cancelled by returning false within the <code>beforeSend</code> callback function. </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;
+ <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;</pre>
+&lt;div class="log"&gt;&lt;/div&gt;</code></pre>
<p>We can attach our event handler to any element:</p>
- <pre>$('.log').ajaxStop(function() {
+ <pre><code>$('.log').ajaxStop(function() {
$(this).text('Triggered ajaxStop handler.');
-});</pre>
+});</code></pre>
<p>Now, we can make an Ajax request using any jQuery method:</p>
- <pre>$('.trigger').click(function() {
+ <pre><code>$('.trigger').click(function() {
$('.result').load('ajax/test.html');
-});</pre>
+});</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>Because <code>.ajaxStop()</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>
</longdesc>
View
@@ -11,27 +11,27 @@
<longdesc>
<p>Whenever an Ajax request completes successfully, jQuery triggers the <code>ajaxSuccess</code> event. Any and all handlers that have been registered with the <code>.ajaxSuccess()</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;
+ <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;</pre>
+&lt;div class="log"&gt;&lt;/div&gt;</code></pre>
<p>We can attach our event handler to any element:</p>
- <pre>$('.log').ajaxSuccess(function() {
+ <pre><code>$('.log').ajaxSuccess(function() {
$(this).text('Triggered ajaxSuccess handler.');
-});</pre>
+});</code></pre>
<p>Now, we can make an Ajax request using any jQuery method:</p>
- <pre>$('.trigger').click(function() {
+ <pre><code>$('.trigger').click(function() {
$('.result').load('ajax/test.html');
-});</pre>
+});</code></pre>
<p>When the user clicks the element with class <code>trigger</code> and the Ajax request completes successfully, the log message is displayed.</p>
<p><strong>Note:</strong> Because <code>.ajaxSuccess()</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>ajaxSuccess</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>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, 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.responseText</code> for xml and html respectively.</p>
- <pre>$('.log').ajaxSuccess(function(e, xhr, settings) {
+ <pre><code>$('.log').ajaxSuccess(function(e, xhr, settings) {
if (settings.url == 'ajax/test.html') {
$(this).text('Triggered ajaxSuccess handler. The ajax response was:'
+ xhr.responseText );
}
-});</pre>
+});</code></pre>
</longdesc>
<example>
<desc>Show a message when an Ajax request completes successfully.</desc>
Oops, something went wrong.

0 comments on commit e3addc0

Please sign in to comment.