Tutorials

jQuery ajaxComplete Event

Posted in jQuery Tutorial

Updated on Nov 01, 2024

By Mari Selvan

👁️ 43 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In the realm of web development, asynchronous requests play a crucial role in fetching data from servers without interrupting the user experience. jQuery simplifies this process with its AJAX methods, offering a wide range of events to handle various stages of an AJAX request. One such event is ajaxComplete, which, despite being deprecated, remains relevant for developers.

In this guide, we'll explore the ajaxComplete event, understanding its functionality and its modern replacement, .on() method.

🧠 Understanding ajaxComplete Event

The ajaxComplete event in jQuery is triggered whenever an AJAX request completes successfully, regardless of its outcome. It provides a convenient way to execute code after each AJAX request finishes.

💡 Deprecated Syntax:

The following syntax for the ajaxComplete event is deprecated:

syntax.js

Copied

$(document).ajaxComplete(function(event, xhr, settings) {
  // Code to execute after every AJAX request completes
});

💡 Modern Replacement:

The syntax for the ajaxComplete event is straightforward:

syntax.js

Copied

$(document).on("ajaxComplete", function(event, xhr, settings) {
  // Code to execute after every AJAX request completes
});

💡 Syntax

The syntax for the ajaxComplete event is straightforward:

syntax.js

Copied

$(document).on("ajaxComplete", [, eventData ], handler );

Parameters:

eventData (Optional): A plain object or string that is passed to the event handler.
handler: A function to execute when the ajaxComplete event is triggered. It receives three parameters: the event object, the XMLHttpRequest object (xhr), and the AJAX request settings.

📝 Example

Displaying a Message After Each AJAX Request:
example.js
Copied
```
$(document).on("ajaxComplete", function(event, xhr, settings) {
  console.log("AJAX request completed!");
});
```
This code will log "AJAX request completed!" to the console after every AJAX request finishes.
Updating UI Elements After AJAX Completion:
example.js
Copied
```
$(document).on("ajaxComplete", function(event, xhr, settings) {
  $("#status").text("All AJAX requests completed successfully.");
});
```
Here, the text content of an element with the ID status will be updated after each AJAX request.

Handling AJAX Errors:

example.js

Copied

$(document).on("ajaxComplete", function(event, xhr, settings) {
  if (xhr.status !== 200) {
    console.error("AJAX request failed:", xhr.statusText);
  }
});

This code checks if the AJAX request returns a status other than 200 (OK) and logs an error message if it does.

🎉 Conclusion

Although the ajaxComplete event is deprecated, understanding its functionality is crucial for developers working with older codebases. However, it's recommended to use the modern .on() method to handle AJAX completion events effectively.

By utilizing this event, you can perform various tasks after each AJAX request, enhancing the user experience and maintaining code integrity in your web applications.