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 Ajax requests complete 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 ajaxComplete() function of jQuery. This function is always triggered when the request is completed.

Syntax

Use the following syntax to register a handler after every ajax request −

$(document).ajaxComplete(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 show the message when the ajax request completes using the ajaxComplete() function.

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <title>TutorialsPoint | jQuery</title>
</head>
<body>
   <center>
      <h2>jQuery ajaxComplete() Method</h2>
      <strong>Registers a handler to be called when Ajax requests complete.</strong>
      <br />
      <br />
      <button id="loadBtn">Load page</button>
      <div id="tutorials"></div>
      <div id="loaded"></div>
   </center>
   <script>
      $(document).ajaxComplete(function () {
         $('#loaded').text('The AJAX requests completed.')
      })
      $('#loadBtn').click(function () {
         $('#tutorials').load('./index.html')
      })
   </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: 16px solid #f3f3f3; /* Light grey */
         border-top: 16px solid #3498db; /* Blue */
         border-radius: 50%;
         width: 120px;
         height: 120px;
         animation: spin 2s linear infinite;
      }
      @keyframes spin {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <center>
      <h2>jQuery ajaxComplete() Method</h2>
      <strong>Rregisters a handler to be called when Ajax requests complete.</strong>
      <br />
      <br />
      <button id="loadBtn">Load page</button>
      <div class="loader"></div>
      <div id="loaded"></div>
   </center>
   <script>
      $('.loader').hide()
      $(document).ajaxComplete(function () {
         $('#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:32:25

Advertisements