Skip to content

Commit

Permalink
ajaxStart: Mark the shorthand method as deprecated
Browse files Browse the repository at this point in the history
  • Loading branch information
mgol committed Apr 17, 2023
1 parent 8afd090 commit 6abafeb
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 45 deletions.
110 changes: 67 additions & 43 deletions entries/ajaxStart.xml
Original file line number Diff line number Diff line change
@@ -1,45 +1,69 @@
<?xml version="1.0"?>
<entry type="method" name="ajaxStart" return="jQuery">
<title>.ajaxStart()</title>
<signature>
<added>1.0</added>
<argument name="handler" type="Function">
<desc>The function to be invoked.</desc>
</argument>
</signature>
<entries>
<desc>Register a handler to be called when the first Ajax request begins. This is an <a href="/Ajax_Events/">Ajax Event</a>.</desc>
<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, 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 any element:</p>
<pre><code>
$( document ).ajaxStart(function() {
$( ".log" ).text( "Triggered ajaxStart 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 is sent, the log message is displayed.</p>
</longdesc>
<note id="global-ajax-event" type="additional" data-title=".ajaxStart()"/>
<note id="ajax-global-false" type="additional" data-title=".ajaxStart()"/>
<example>
<desc>Show a loading message whenever an Ajax request starts (and none is already active).</desc>
<code><![CDATA[
$( document ).ajaxStart(function() {
$( "#loading" ).show();
});
]]></code>
</example>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
</entry>
<entry type="method" name="on" return="jQuery">
<title>ajaxStart event</title>
<signature>
<added>1.7</added>
<argument name="&quot;ajaxStart&quot;" type="string">
<desc>The string <code>"ajaxStart"</code>.</desc>
</argument>
<argument name="handler" type="Function">
<desc>The function to be invoked.</desc>
</argument>
</signature>
<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 <code>.on( "ajaxStart", ... )</code> 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 any element:</p>
<pre><code>
$( document ).on( "ajaxStart", function() {
$( ".log" ).text( "Triggered ajaxStart handler." );
} );
</code></pre>
<p>Now, make an Ajax request using any jQuery method:</p>
<pre><code>
$( ".trigger" ).on( "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 is sent, the log message is displayed.</p>
</longdesc>
<note id="global-ajax-event" type="additional" data-title="ajaxStart"/>
<note id="ajax-global-false" type="additional" data-title="ajaxStart"/>
<example>
<desc>Show a loading message whenever an Ajax request starts (and none is already active).</desc>
<code><![CDATA[
$( document ).on( "ajaxStart", function() {
$( "#loading" ).show();
} );
]]></code>
</example>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
</entry>

<entry type="method" name="ajaxStart" return="jQuery" deprecated="3.3">
<title>.ajaxStart()</title>
<signature>
<added>1.0</added>
<argument name="handler" type="Function">
<desc>The function to be invoked.</desc>
</argument>
</signature>
<longdesc>
<div class="warning">
<p>This API is deprecated.</p>
<p>Use <a href="#on1"><code>.on( "ajaxStart", handler )</code></a> instead.</p>
</div>
</longdesc>
<category slug="ajax/global-ajax-event-handlers"/>
<category slug="version/1.0"/>
<category slug="deprecated/deprecated-3.3"/>
</entry>
</entries>
4 changes: 2 additions & 2 deletions notes.xsl
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
If a request with <xsl:value-of select="@data-title"/> returns an error code, it will fail silently unless the script has also called the global <a href="/ajaxError/">.ajaxError() </a> method. Alternatively, as of jQuery 1.5, the <code>.error()</code> method of the <code>jqXHR</code> object returned by <xsl:value-of select="@data-title"/> is also available for error handling.
</xsl:when>
<xsl:when test="@id = 'ajax-global-false'">
If <code><a href="/jQuery.Ajax/">$.ajax()</a></code> or <code><a href="/jQuery.ajaxSetup/">$.ajaxSetup()</a></code> is called with the <code>global</code> option set to <code>false</code>, the <code><xsl:value-of select="@data-title"/></code> method will not fire.
If <code><a href="/jQuery.Ajax/">$.ajax()</a></code> or <code><a href="/jQuery.ajaxSetup/">$.ajaxSetup()</a></code> is called with the <code>global</code> option set to <code>false</code>, the <code><xsl:value-of select="@data-title"/></code> event will not fire.
</xsl:when>
<xsl:when test="@id = 'slide-in-ie'">
If <code><xsl:value-of select="@data-title"/></code> is called on an unordered list (<code>&lt;ul&gt;</code>) and its <code>&lt;li&gt;</code> elements have position (relative, absolute, or fixed), the effect may not work properly in IE6 through at least IE9 unless the <code>&lt;ul&gt;</code> has "layout." To remedy the problem, add the <code>position: relative;</code> and <code>zoom: 1;</code> CSS declarations to the <code>ul</code>.
Expand All @@ -65,7 +65,7 @@
Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.
</xsl:when>
<xsl:when test="@id = 'global-ajax-event'">
As of jQuery 1.9, all the handlers for the <a href="/category/ajax/global-ajax-event-handlers/">jQuery global Ajax events</a>, including those added with the <code><xsl:value-of select="@data-title"/></code> method, <em>must</em> be attached to <code>document</code>.
As of jQuery 1.9, all the handlers for the <a href="/category/ajax/global-ajax-event-handlers/">jQuery global Ajax events</a>, including those added with <code>.on( "<xsl:value-of select="@data-title"/>", ... )</code>, <em>must</em> be attached to <code>document</code>.
</xsl:when>
<xsl:when test="@id = 'svg-support'">
jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are <code>addClass</code> and <code>removeClass</code>.
Expand Down

0 comments on commit 6abafeb

Please sign in to comment.