Wednesday, June 6, 2012

very simple jquery ajax

jquery supports ranges of ajax calling, below is the very simple code

Note:

  • use method get
  • receive data as html
$(
 function(){
 // Get a reference to the content div (into which we will load content).
 var jContent = $( "#content" );
      
 // Hook up link click events to load content.
 $( "a" ).click(
 function( objEvent ){
   var jLink = $( this );
  
   // Clear status list.
   $( "#ajax-status" ).empty();
    
   // Launch AJAX request.
   $.ajax(
     {
         // The link we are accessing.
  url: jLink.attr( "href" ),
      
  // The type of request.
  type: "get",
      
  // The type of data that is getting returned.
  dataType: "html",
      
  error: function(){
   ShowStatus( "AJAX - error()" );
       
         // Load the content in to the page. 
         jContent.html( "Page Not Found!!

"                    );
  },
      
  beforeSend: function(){
   ShowStatus( "AJAX - beforeSend()" );
  },
    
  complete: function(){
   ShowStatus( "AJAX - complete()" );
  },
      
  success: function( strData ){
             ShowStatus( "AJAX - success()" );
       
   // Load the content in to the page.
   jContent.html( strData );
  }
 }       
     );
    
     // Prevent default click. 
     return( false );     
}
);
  
 }
 );

source: http://www.bennadel.com/resources/presentations/jquery/demo21/index.htm

1 comment: