Open In App
Related Articles

jQuery ajaxComplete() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The ajaxComplete() method is used to specify a 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.

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

html

<!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>

                    

demo.txt

"This is GeeksforGeeks.!"

Output:

jquery-72

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

AJAX request completes.

html

<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $(document).ajaxComplete(function () {
                alert("AJAX request completes.");
            });
            $("button").click(function () {
                $("h1").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>

                    

demo.txt

"This is GeeksforGeeks.!"

Output:

jquery-73



Last Updated : 12 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads