Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In our last tutorial post, we discussed about the various Ajax methods in jQuery and how they can be implemented.
So moving forward, in this tutorial we are going to be studying about the Ajax Event methods in jQuery.
So moving forward, in this tutorial we are going to be studying about the Ajax Event methods in jQuery.
ajaxComplete( callback ) Method
ajaxComplete( callback ) method attaches a function to be executed whenever an AJAX request is been completes.
Syntax
The following below is the syntax to use this method -
$(document).ajaxComplete( callback );
Parameter Details
Below is the description of all the parameters -
- callback - It is the function to be executed. The XML Http request and settings that are used for that request are all passed as arguments to the function.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( 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>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( 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>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assume we have the below HTML content in /jquery/result.html file -
<h1>THIS IS RESULT.......</h1>
You can try the above code out to see the result for yourselves.
RECOMMENDED: The Ultimate Guide to JQuery AJAX
ajaxStart( callback ) Method
jQuery ajaxStart(callback) method attaches a function to be executed whenever an Ajax request starts and there is none already active. This is known as an AJAX Event.
Syntax
The following below is the syntax to use this method -
$(document).ajaxStart( callback );
Parameter Details
Below is the description of all the parameters -
- callback - It is the function to execute.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This is a global variable */
var count = 0;
$( "#driver" ).click( function( event ) {
$( '#stage1' ).load( 'result.html' );
} );
/* Get called when request starts. */
$( document ).ajaxStart( function( ) {
count ++;
$( "#stage2" ).html( "<h1>Starts, Count : " + count + "</h1>" );
} );
/* Get called when request completes. */
$( document ).ajaxComplete( function( event, request, set ) {
count ++;
$( "#stage3" ).html( "<h1>Completes, Count : " + count + "</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color: green;">
STAGE - 3
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This is a global variable */
var count = 0;
$( "#driver" ).click( function( event ) {
$( '#stage1' ).load( 'result.html' );
} );
/* Get called when request starts. */
$( document ).ajaxStart( function( ) {
count ++;
$( "#stage2" ).html( "<h1>Starts, Count : " + count + "</h1>" );
} );
/* Get called when request completes. */
$( document ).ajaxComplete( function( event, request, set ) {
count ++;
$( "#stage3" ).html( "<h1>Completes, Count : " + count + "</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color: green;">
STAGE - 3
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assume we have the below HTML content in /jquery/result.html file -
<h1>THIS IS RESULT.......</h1>
You can try the above code out to see the result for yourselves.
ajaxError( callback ) Method
jQuery ajaxError(callback) method attaches a function to be executed whenever an AJAX request fails. This is an AJAX Event.
Syntax
The following below is the syntax to use this method -
$(document).ajaxError( callback );
Parameter Details
Below is the description of all the parameters -
- callback - It is the function to be executed. The XML Http request and settings that are used for that request are all passed as arguments to the function. A third argument, an exception object, is passed if an exception occurs while processing the request.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
/* Assume that result.text does not exist. */
$( '#stage1' ).load( '/jquery/result.text' );
} );
$( document ).ajaxError( function( event, request, settings ) {
$( "#stage2" ).html( "<h1>Error in loading page!</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.text file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
/* Assume that result.text does not exist. */
$( '#stage1' ).load( '/jquery/result.text' );
} );
$( document ).ajaxError( function( event, request, settings ) {
$( "#stage2" ).html( "<h1>Error in loading page!</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.text file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
You can try the above code out to see the result for yourselves.
RECOMMENDED: The Practical Guide to jQuery Attribute Methods
ajaxSend( callback ) Method
jQuery ajaxSend(callback) method attaches a function to be executed whenever an Ajax request is sent. This is known as an AJAX Event.
Syntax
The following below is the syntax to use this method -
$(document).ajaxSend( callback );
Parameter Details
Below is the description of all the parameters -
- callback - It is the function to be executed. The XML Http request and settings that are used for the request are all passed as arguments to the callback.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This is a global variable */
var count = 0;
$( "#driver" ).click( function( event ) {
$( '#stage0' ).load( 'result.html' );
} );
/* Get called when request starts. */
$( document ).ajaxStart( function( ) {
count ++;
$( "#stage1" ).html( "<h1>Starts, Count : " + count + "</h1>" );
} );
/* Get called when request is sent. */
$( document ).ajaxSend( function( event, request, set ) {
count ++;
$( "#stage2" ).html( "<h1>Sends, Count : " + count + "</h1>" );
$( "#stage2" ).append( "<h1>URL : " + set.url + "</h1>" );
} );
/* Get called when request completes. */
$( document ).ajaxComplete( function( event, request, set ) {
count ++;
$( "#stage3" ).html( "<h1>Completes, Count : " + count + "</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage0" style = "background-color: green;">
STAGE - 0
</div>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color: green;">
STAGE - 3
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This is a global variable */
var count = 0;
$( "#driver" ).click( function( event ) {
$( '#stage0' ).load( 'result.html' );
} );
/* Get called when request starts. */
$( document ).ajaxStart( function( ) {
count ++;
$( "#stage1" ).html( "<h1>Starts, Count : " + count + "</h1>" );
} );
/* Get called when request is sent. */
$( document ).ajaxSend( function( event, request, set ) {
count ++;
$( "#stage2" ).html( "<h1>Sends, Count : " + count + "</h1>" );
$( "#stage2" ).append( "<h1>URL : " + set.url + "</h1>" );
} );
/* Get called when request completes. */
$( document ).ajaxComplete( function( event, request, set ) {
count ++;
$( "#stage3" ).html( "<h1>Completes, Count : " + count + "</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage0" style = "background-color: green;">
STAGE - 0
</div>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color: green;">
STAGE - 3
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assume we have the below HTML content in /jquery/result.html file -
<h1>THIS IS RESULT.......</h1>
You can try the above code out to see the result for yourselves.
RECOMMENDED: How to add Attributes to an Element using jQuery?
ajaxStop( callback ) Method
jQuery ajaxStop(callback) method attaches a function to be executed whenever an Ajax request have ended. This is known as an AJAX Event.
Syntax
The following below is the syntax to use this method -
$(document).ajaxStop( callback );
Parameter Details
Below is the description of all the parameters -
- callback - It is the function to execute.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This is a global variable */
var count = 0;
$( "#driver" ).click( function( event ) {
$( '#stage0' ).load( 'result.html' );
} );
/* Get called when request starts. */
$( document ).ajaxStart( function( ) {
count ++;
$( "#stage1" ).html( "<h1>Starts, Count : " + count + "</h1>" );
} );
/* Get called when request is sent. */
$( document ).ajaxSend( function( event, request, set ) {
count ++;
$( "#stage2" ).html( "<h1>Sends, Count : " + count + "</h1>" );
$( "#stage2" ).append( "<h1>URL : " + set.url + "</h1>" );
} );
/* Get called when request completes. */
$( document ).ajaxComplete( function( event, request, set ) {
count ++;
$( "#stage3" ).html( "<h1>Completes, Count : " + count + "</h1>" );
} );
/* Get called when all requests are ended. */
$( document ).ajaxStop( function( event, request, set ) {
count ++;
$( "#stage4" ).html( "<h1>Stops, Count : " + count + "</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage0" style = "background-color: green;">
STAGE - 0
</div>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color: green;">
STAGE - 3
</div>
<div id = "stage4" style = "background-color: green;">
STAGE - 4
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This is a global variable */
var count = 0;
$( "#driver" ).click( function( event ) {
$( '#stage0' ).load( 'result.html' );
} );
/* Get called when request starts. */
$( document ).ajaxStart( function( ) {
count ++;
$( "#stage1" ).html( "<h1>Starts, Count : " + count + "</h1>" );
} );
/* Get called when request is sent. */
$( document ).ajaxSend( function( event, request, set ) {
count ++;
$( "#stage2" ).html( "<h1>Sends, Count : " + count + "</h1>" );
$( "#stage2" ).append( "<h1>URL : " + set.url + "</h1>" );
} );
/* Get called when request completes. */
$( document ).ajaxComplete( function( event, request, set ) {
count ++;
$( "#stage3" ).html( "<h1>Completes, Count : " + count + "</h1>" );
} );
/* Get called when all requests are ended. */
$( document ).ajaxStop( function( event, request, set ) {
count ++;
$( "#stage4" ).html( "<h1>Stops, Count : " + count + "</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage0" style = "background-color: green;">
STAGE - 0
</div>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color: green;">
STAGE - 3
</div>
<div id = "stage4" style = "background-color: green;">
STAGE - 4
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assume we have the below HTML content in /jquery/result.html file -
<h1>THIS IS RESULT.......</h1>
You can try the above code out to see the result for yourselves.
RECOMMENDED: The Complete of Selectors in jQuery
ajaxSuccess( callback ) Method
ajaxSuccess(callback) method attaches a function to be executed whenever an Ajax request is been completed successfully. This is known as an AJAX Event.
Syntax
The following below is the syntax to use this method -
$(document).ajaxSuccess( callback );
Parameter Details
Below is the description of all the parameters -
- callback - It is the function to execute.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This is a global variable */
var count = 0;
$( "#driver" ).click( function( event ) {
$( '#stage0' ).load( 'result.html' );
} );
/* Get called when request starts. */
$( document ).ajaxStart( function( ) {
count ++;
$( "#stage1" ).html( "<h1>Starts, Count : " + count + "</h1>" );
} );
/* Get called when request is sent. */
$( document ).ajaxSend( function( event, request, set ) {
count ++;
$( "#stage2" ).html( "<h1>Sends, Count : " + count + "</h1>" );
$( "#stage2" ).append( "<h1>URL : " + set.url + "</h1>" );
} );
/* Get called when request completes. */
$( document ).ajaxComplete( function( event, request, set ) {
count ++;
$( "#stage3" ).html( "<h1>Completes, Count : " + count + "</h1>" );
} );
/* Get called when all requests are ended. */
$( document ).ajaxStop( function( event, request, set ) {
count ++;
$( "#stage4" ).html( "<h1>Stops, Count : " + count + "</h1>" );
} );
/* Get called when all requests are completed successfully. */
$( document ).ajaxSuccess( function( event, request, set ) {
count ++;
$( "#stage5" ).html( "<h1>Success, Count : " + count + "</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage0" style = "background-color: green;">
STAGE - 0
</div>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color: green;">
STAGE - 3
</div>
<div id = "stage4" style = "background-color: green;">
STAGE - 4
</div>
<div id = "Stage5" style = "background-color: green;">
STAGE - 5
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This is a global variable */
var count = 0;
$( "#driver" ).click( function( event ) {
$( '#stage0' ).load( 'result.html' );
} );
/* Get called when request starts. */
$( document ).ajaxStart( function( ) {
count ++;
$( "#stage1" ).html( "<h1>Starts, Count : " + count + "</h1>" );
} );
/* Get called when request is sent. */
$( document ).ajaxSend( function( event, request, set ) {
count ++;
$( "#stage2" ).html( "<h1>Sends, Count : " + count + "</h1>" );
$( "#stage2" ).append( "<h1>URL : " + set.url + "</h1>" );
} );
/* Get called when request completes. */
$( document ).ajaxComplete( function( event, request, set ) {
count ++;
$( "#stage3" ).html( "<h1>Completes, Count : " + count + "</h1>" );
} );
/* Get called when all requests are ended. */
$( document ).ajaxStop( function( event, request, set ) {
count ++;
$( "#stage4" ).html( "<h1>Stops, Count : " + count + "</h1>" );
} );
/* Get called when all requests are completed successfully. */
$( document ).ajaxSuccess( function( event, request, set ) {
count ++;
$( "#stage5" ).html( "<h1>Success, Count : " + count + "</h1>" );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage0" style = "background-color: green;">
STAGE - 0
</div>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<div id = "stage2" style = "background-color: green;">
STAGE - 2
</div>
<div id = "stage3" style = "background-color: green;">
STAGE - 3
</div>
<div id = "stage4" style = "background-color: green;">
STAGE - 4
</div>
<div id = "Stage5" style = "background-color: green;">
STAGE - 5
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assume we have the below HTML content in /jquery/result.html file -
<h1>THIS IS RESULT.......</h1>
You can try the above code out to see the result for yourselves.
Alright guys! we have come to the end of this tutorial post on JQuery AJAX Event methods. In our next tutorial, we will be studying about how you can use jQuery in creating beautiful effects.
Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.
Thanks for reading and bye for now.
Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.
Thanks for reading and bye for now.