- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between ajaxSuccess() and ajaxComplete() functions in jQuery?
ajaxSuccess() method
The ajaxSuccess( callback ) method attaches a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.
Here is the description of all the parameters used by this method −
- callback − The function to execute. The event object, XMLHttpRequest, and settings used for that request are passed as arguments to the callback.
Assuming we have the following HTML content in result.html file:
<h1>THIS IS RESULT...</h1>
Example
The following is an example showing the usage of this method:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
/* Global variable */
var count = 0;
$("#driver").click(function(event){
$('#stage0').load('result.html');
});
/* Gets called when request starts */
$(document).ajaxStart(function(){
count++;
$("#stage1").html("<h1>Starts, Count :" + count + "</h1>");
});
/* Gets called when request is sent */
$(document).ajaxSend(function(evt, req, set){
count++;
$("#stage2").html("<h1>Sends, Count :" + count + "</h1>");
$("#stage2").append("<h1>URL :" + set.url + "</h1>");
});
/* Gets called when request completes */
$(document).ajaxComplete(function(event,request,settings){
count++;
$("#stage3").html("<h1>Completes,Count:" + count + "</h1>");
});
/* Gets called when request is stopped */
$(document).ajaxStop(function(event,request,settings){
count++;
$("#stage4").html("<h1>Stops, Count :" + count + "</h1>");
});
/* Gets called when all request completes successfully */
$(document).ajaxSuccess(function(event,request,settings){
count++;
$("#stage5").html("<h1>Success,Count :" + count + "</h1>");
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id = "stage0" style = "background-color:blue;">
STAGE - 0
</div>
<div id = "stage1" style = "background-color:blue;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color:blue;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color:blue;">
STAGE - 3
</div>
<div id = "stage4" style = "background-color:blue;">
STAGE - 4
</div>
<div id = "stage5" style = "background-color:blue;">
STAGE - 5
</div>
<input type = "button" id = "driver" value="Load Data" />
</body>
</html>ajaxComplete() method
The ajaxComplete( callback ) method attaches a function to be executed whenever an AJAX request completes.
Here is the description of all the parameters used by this method −
- callback − The function to execute. The XMLHttpRequest and settings used for that request are passed as arguments to this function.
Assuming we have the following HTML content in result.html file −
<h1>THIS IS RESULT...</h1>
Example
The following is an example showing the usage of this method:
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage1').load('result.html');
});
$(document).ajaxComplete(function(event, request, settings){
$("#stage2").html("<h1>Request Complete.</h1>");
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id = "stage1" style = "background-color:blue;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color:blue;">
STAGE - 2
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
- Related Articles
- What is the difference between ajaxStop() and ajaxComplete() functions in jQuery?
- What is the difference between jQuery.map() and jQuery.grep() Functions in jQuery?
- What is the difference between jQuery.map() and jQuery.each() Functions in jQuery?
- What is the difference between ajaxSend() and ajaxStart() functions in jQuery?
- What is the difference between $(window).load() and $(document).ready() functions in jQuery?
- What is the difference between Ajax and jQuery-Ajax methods in jQuery?
- What is the difference between jQuery and JavaScript?
- What is the difference between jQuery and AngularJS?
- What is the difference between functions and methods in JavaScript?
- What is the difference between jQuery add() & jQuery append() methods in jQuery?
- What is the difference between CONCAT() and CONCAT_WS() functions?
- What is the difference between Grep and Filter in jQuery?
- What is the difference between jQuery.children( ) and jQuery.siblings( ) in jQuery?
- What is the difference between append() and appendTo() in jQuery?
- What is the difference between height and innerHeight in jQuery?
Advertisements