Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery Basic

jQuery Ajax Events

jQuery Ajax Methods

jQuery Keyboard Events

jQuery Keyboard Methods

jQuery Form Events

jQuery Form Methods

jQuery Mouse Event

jQuery Mouse Methods

jQuery Event Object

jQuery Fading

jQuery Document Loading

jQuery Traversing

jQuery Utilities

jQuery Property

jQuery HTML

jQuery CSS

jQuery Miscellaneous

jQuery .ajaxComplete() Method

Posted in jQuery Tutorial
Updated on May 14, 2024
By Mari Selvan
πŸ‘οΈ 35 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
jQuery .ajaxComplete() Method

Photo Credit to CodeToFun

πŸ™‹ Introduction

The ajaxComplete() method in jQuery is an event handler that gets executed when an AJAX request completes. This can be particularly useful when you need to perform specific actions after any AJAX request has finished, such as updating the user interface or logging the completion of requests.

In this guide, we'll explore how to use the ajaxComplete() method effectively with practical examples.

🧠 Understanding .ajaxComplete() Method

The ajaxComplete() method is a shorthand for attaching a function that will run whenever an AJAX request completes. This includes both successful and unsuccessful requests.

πŸ’‘ Syntax

The syntax for the .ajaxComplete() method is straightforward:

syntax.js
Copied
Copy To Clipboard
$(document).ajaxComplete(function(event, xhr, settings) {
  // Code to execute after an AJAX request completes
});

Parameters:

  • event: The event object.
  • xhr: The XMLHttpRequest object.
  • settings: The settings used in the AJAX request.

πŸ“ Example

  1. Basic Usage of ajaxComplete():

    Here's a basic example demonstrating how to use ajaxComplete() to log a message every time an AJAX request completes:

    example.js
    Copied
    Copy To Clipboard
    $(document).ajaxComplete(function(event, xhr, settings) {
      console.log("An AJAX request completed!");
    });

    This will log the message An AJAX request completed! to the console whenever an AJAX request finishes.

  2. Displaying a Loading Spinner:

    You can use ajaxComplete() to hide a loading spinner once an AJAX request completes. Here’s an example:

    index.html
    Copied
    Copy To Clipboard
    <div id="loading">Loading...</div>
    example.js
    Copied
    Copy To Clipboard
    $(document).ajaxComplete(function(event, xhr, settings) {
      $("#loading").hide();
    });

    Assuming you show the spinner before the AJAX request starts, this will hide the spinner once the request is complete.

  3. Handling Specific AJAX Requests:

    You can differentiate between different AJAX requests by examining the settings parameter. For example:

    example.js
    Copied
    Copy To Clipboard
    $(document).ajaxComplete(function(event, xhr, settings) {
      if (settings.url === "fetch-data.php") {
          console.log("Data fetching complete.");
      }
    });

    This will log a specific message only when the AJAX request to fetch-data.php completes.

  4. Updating the User Interface:

    You can update parts of the UI based on the completion of AJAX requests. Here’s how you might refresh a data table after an AJAX request completes:

    example.js
    Copied
    Copy To Clipboard
    $(document).ajaxComplete(function(event, xhr, settings) {
      if (settings.url === "/get-user-data") {
          $("#userTable").load("/get-user-data");
      }
    });

    This will reload the #userTable element with fresh data from the /get-user-data URL once the AJAX request completes.

  5. Combining with Other AJAX Events:

    The ajaxComplete() method can be combined with other AJAX events like ajaxStart() and ajaxStop() for more comprehensive control over AJAX request handling. For instance:

    example.js
    Copied
    Copy To Clipboard
    $(document).ajaxStart(function() {
      $("#loading").show();
    }).ajaxComplete(function() {
      $("#loading").hide();
    });

    This will show a loading spinner at the start of any AJAX request and hide it once the request completes.

πŸŽ‰ Conclusion

The jQuery ajaxComplete() method is a powerful tool for handling the completion of AJAX requests. Whether you need to update the user interface, log messages, or perform specific actions based on different requests, ajaxComplete() provides a straightforward solution.

By integrating this method into your AJAX workflows, you can ensure your web applications respond dynamically and efficiently to user interactions.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy