Sunday, May 10, 2020

A Complete Guide to JQuery AJAX Event Methods



Hello guys! Welcome to a new section of my tutorial post on jQuery. In my 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 discussing about the Ajax Event methods in jQuery.

ajaxComplete( callback ) Method 

The ajaxComplete(callback) method attaches a function to be executed whenever an AJAX request is been completes.    

Syntax

Below is the syntax to use this method -

 $(document).ajaxComplete( callback );

Parameter Details

Below is the description of all the parameters -

  • callback - The function to execute. The XML Http Request and settings used for that request are pissed 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>

Assuming we have the following 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.


ajaxStart( callback ) Method 

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

Below is the syntax to use this method -

 $(document).ajaxStart( callback );

Parameter Details

Below is the description of all the parameters -

  • callback - 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>

Assuming we have the following 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 

ajaxError(callback) method attaches a function to be executed whenever an AJAX request fails. This is an AJAX Event.      

Syntax

Below is the syntax to use this method -

 $(document).ajaxError( callback );

Parameter Details

Below is the description of all the parameters -

  • callback - The function to execute. The XML Http Request and settings used for that request are pissed 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>

You can try the above code out to see the result for yourselves.


ajaxSend( callback ) Method 

ajaxSend(callback) method attaches a function to be executed whenever an Ajax request is sent. This is known as an AJAX Event. 

Syntax

Below is the syntax to use this method -

 $(document).ajaxSend( callback );

Parameter Details

Below is the description of all the parameters -

  • callback - The function to execute. The XML Http Request and settings used for the request are 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>

Assuming we have the following 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.


ajaxStop( callback ) Method 
ajaxStop(callback) method attaches a function to be executed whenever an Ajax request have ended. This is known as an AJAX Event. 

Syntax
Below is the syntax to use this method -

 $(document).ajaxStop( callback );

Parameter Details
Below is the description of all the parameters -

  • callback - 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>

Assuming we have the following 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.


ajaxSuccess( callback ) Method 
The 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
Below is the syntax to use this method -

 $(document).ajaxSuccess( callback );

Parameter Details
Below is the description of all the parameters -

  • callback - 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>

Assuming we have the following 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 my next tutorial, i will be discussing about how to use jQuery to create 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.
Share:

0 comments:

Post a Comment