jQuery .ajaxComplete() Method

Posted in jQuery Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 40 - Views

⏳ 4 mins

💬 1 Comment

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

$(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

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
```
$(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.
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
```
<div id="loading">Loading...</div>
```
example.js
Copied
```
$(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.
Handling Specific AJAX Requests:

You can differentiate between different AJAX requests by examining the settings parameter. For example:
example.js
Copied
```
$(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.
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
```
$(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.
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
```
$(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.