YouTip

## jQuery ajaxStop() Method The `ajaxStop()` method is a global AJAX event handler in jQuery. It specifies a callback function to be executed when **all** active AJAX requests have completed. When an AJAX request finishes, jQuery checks if there are any other active AJAX requests remaining in the queue. If no other requests are pending, the `ajaxStop()` method triggers and runs the specified function. --- ### Syntax ```javascript $(document).ajaxStop(function()) ``` | Parameter | Type | Description | | :--- | :--- | :--- | | `function()` | Function | **Required.** The callback function to run when all AJAX requests have completed. | > **Note:** As of jQuery version 1.8, the `ajaxStop()` method should only be attached to the `document` object. --- ### How It Works The `ajaxStop()` method is part of jQuery's global AJAX event suite. It is highly useful for managing UI states that depend on multiple asynchronous operations, such as: * Hiding a global loading spinner or progress bar once all data has finished loading. * Enabling form submit buttons after background validation requests are complete. * Triggering page layout recalculations after all dynamic content has been fetched. --- ### Code Examples #### Example 1: Basic Usage (Displaying an Alert) The following example displays an alert box when all active AJAX requests have finished: ```javascript $(document).ajaxStop(function(){ alert("All AJAX requests have completed."); }); ``` #### Example 2: Managing a Global Loading Spinner A common real-world use case is showing a loading indicator when AJAX requests start and hiding it only when *all* requests have finished. You can pair `ajaxStart()` with `ajaxStop()` to achieve this: ```html Fetch Data ``` --- ### Important Considerations 1. **Global Event Restriction:** Since jQuery 1.9, global AJAX events like `ajaxStop()` must be attached to the `document` element. Writing code like `$("#spinner").ajaxStop(...)` is deprecated and will not work as expected in modern jQuery versions. 2. **Bypassing Global Events:** If you have a specific AJAX request that you do not want to trigger global handlers (like `ajaxStop()`), you can set the `global` option to `false` in that specific `$.ajax()` configuration: ```javascript $.ajax({ url: "example.php", global: false // This request will not trigger ajaxStart or ajaxStop }); ```