How to register a handler to be called when all Ajax requests completed using jQuery?

Front End TechnologyjQueryWeb Development

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>
raja
Updated on 20-Jul-2022 12:37:08

Advertisements