jQuery | ajaxComplete() Method
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
