jQuery ajaxComplete Event

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

1. 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.

2. 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.

3. 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.

👨‍💻 Join our Community:

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

Telegram 450

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