Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to register a handler to be called when all Ajax requests completed using jQuery?
In this tutorial, we will learn how to register a handler to be called when all Ajax requests are completed using jQuery. Ajax requests are typically HTTP requests that are called by the browser for different tasks such as GET, POST, etc. So when the tasks are performed, we can register a handler using the ,ajaxStop() function of jQuery.
Syntax
Use the following syntax to register a handler after an ajax request −
$(document).ajaxStop(function () {
console.log('Registered handler.')
})Explanation − Suppose we have a GET request on an API. When the API returns a result, jQuery checks if any requests are pending or not. If not then jQuery triggers the ajaxStop() function.
Note − The ajaxStop() function must always be attached to the document
Example 1
In the following example, we print the result on the screen to show that the request has been completed by registering a handler using ajaxStop().
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>TutorialsPoint | jQuery</title>
</head>
<body>
<center>
<h1>jQuery ajaxStop() Method</h1>
<strong>Registers a handler to be called when all Ajax requests have been completed.</strong>
<br />
<br />
<button id="loadBtn">Load page</button>
<div id="tutorials"></div>
<div id="loaded"></div>
</center>
<script>
$(document).ajaxStop(function () {
console.log('Triggered ajaxStop handler.')
$('#loaded').text('The AJAX request have been completed.')
})
$('#loadBtn').click(function () {
$('#tutorials').load(
'https://www.tutorialspoint.com/javascript/index.htm',
)
})
</script>
</body>
</html>Example 2
In the following example, we have a loading screen above the webpage that is removed when the request is completed.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>TutorialsPoint | jQuery</title>
<style>
.loader {
border: 12px solid #f3f3f3; /* Light grey */
border-top: 12px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<center>
<h1>jQuery ajaxStop() Method</h1>
<strong>Register a handler to be called when all Ajax requests have been completed.</strong>
<br />
<br />
<button id="loadBtn">Load page</button>
<div class="loader"></div>
<div id="loaded"></div>
</center>
<script>
$('.loader').hide()
$(document).ajaxStop(function () {
console.log('Triggered ajaxStop handler.')
$('#loaded').text('The AJAX request have been completed.')
$('.loader').hide()
})
$('#loadBtn').click(function () {
$('.loader').show()
$(document).load('https://www.tutorialspoint.com/javascript/index.htm')
})
</script>
</body>
</html>
310 Views
To Continue Learning Please Login