Skip to content
Related Articles

Related Articles

Improve Article

jQuery | ajaxComplete() Method

  • Last Updated : 12 Mar, 2019

The ajaxComplete() method is used to specify function to be run when an AJAX request completes.

Syntax:

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

Parameter:

  • event: It contains the event object.
  • xhr: It contains the XMLHttpRequest object.
  • options: It contains the used options in AJAX request.

The demo.txt file stored on the server and it will load after clicking the change content button.
The content of demo.txt are:
This is GFG.

Example-1:This example changes the content of < p > element, by taking the data from server. When the AJAX request completes, the page says AJAX request completes..






<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    
    <script>
        $(document).ready(function() {
            $(document).ajaxComplete(function() {
                alert(" AJAX request completes.");
            });
            $("button").click(function() {
                $("#paragraph").load("demo.txt");
            });
        });
    </script>
    
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div id="div_content">
        <h1 style="color: green;">
          GeeksforGeeks
      </h1>
        <p id="paragraph"
           style="font-size: 20px;">
            A computer science portal for geeks
        </p>
    </div>
    <button>Change Content</button>
</body>
  
</html>

Output:

  • Before click on the button
  • After click on the button

Example-2: This example changes the content of <h1> element, by taking the data from server. When the AJAX request completes, the page says AJAX request completes..




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function() {
          $(document).ajaxComplete(function() {
              alert("AJAX request completes.");
          });
          $("button").click(function() {
              $("#paragraph").load("demo.txt");
          });
      });
    </script>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div id="div_content">
        <h1 style="color: green;">
          GeeksforGeeks
      </h1>
        <p id="paragraph"
           style="font-size: 20px;">
            A computer science portal for geeks
        </p>
    </div>
    <button>Change Content</button>
</body>
  
</html>

Output:

  • Before click on the button
  • After click on the button




My Personal Notes arrow_drop_up
Recommended Articles
Page :