jQuery ajaxStop()

Introduction

Trigger an alert box when all AJAX requests have completed:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>// w ww.ja v a2  s.co  m
<script>
$(document).ready(function(){
  $(document).ajaxStop(function(){
    document.getElementById("demo").innerHTML = "All AJAX requests completed";
  });
  $("button").click(function(){
    $("div").load("ajax.txt");
    $("div").load("ajax.txt");
    $("div").load("ajax.txt");
    $("div").load("ajax.txt");
  });
});
</script>
</head>
<body>

<p id="demo"></p>
<div><h2>Here</h2></div>

<button>Change Content</button>

</body>
</html>

The ajaxStop() method sets a function to run when all AJAX requests have completed.

When an AJAX request completes, jQuery checks if there are any more AJAX requests.

The function set with the ajaxStop() method will run if no other requests are pending.

This method should only be attached to document.

$(document).ajaxStop(function())

Parameter	Optional	Description
`function()`	Required.	the function to run when all AJAX requests have completed

Previous Next