jQuery ajaxComplete()

Introduction

Show a "loading" indicator image while an AJAX request is going on:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>/*  w  w  w  .j  ava  2 s.c  om*/
<script>
$(document).ready(function(){
  $(document).ajaxStart(function(){
    $("#wait").css("display", "block");
  });
  $(document).ajaxComplete(function(){
    $("#wait").css("display", "none");
  });
  $("button").click(function(){
    $("#txt").load("ajax.txt");
  });
});
</script>
</head>
<body>

<div id="txt"><h2>Here</h2></div>

<button>Change Content</button>

<div id="wait" 
     style="display:none;width:70px;height:90px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
     <img src='image1.png' width="64" height="64" />
     <br>Loading..</div>

</body>
</html>

The ajaxComplete() method sets a function to run when an AJAX request completes.

This method should only be attached to document.

functions set with the ajaxComplete() method will run when the request is completed, regardless of success.

$(document).ajaxComplete(function(event,xhr,options))

Parameter	Optional	Description
function(event,xhr,options)	Required.	function to run when the request completes Additional parameters: event - contains the event object xhr - contains the XMLHttpRequest object options - contains the options used in the AJAX request

Previous Next