$.ajaxEVENT() jQuery AJAX Monitoring Demo

About - Contact - Office - Error

Click on the above links to load content.


$(
	function(){
		// Get a reference to the content div (into which we will load content).
		var jContent = $( "#content" );
		
		// Get a reference to our status list.				
		var jStatusList = $( "#ajax-status" );
		
		// Hook up start.
		jStatusList.children( ".ajax-start" ).ajaxStart(
			function(){
				$( this ).slideDown();
			}
			);
			
		// Hook up stop.
		jStatusList.children( ".ajax-stop" ).ajaxStop(
			function(){
				$( this ).slideDown();
			}
			);
			
		// Hook up complete.
		jStatusList.children( ".ajax-complete" ).ajaxComplete(
			function(){
				$( this ).slideDown();
			}
			);
			
		// Hook up success.
		jStatusList.children( ".ajax-success" ).ajaxSuccess(
			function(){
				$( this ).slideDown();
			}
			);
			
		// Hook up error.
		jStatusList.children( ".ajax-error" ).ajaxError(
			function(){
				$( this ).slideDown();
			}
			);
						
		// Hook up link click events to load content.
		$( "a" ).click(
			function( objEvent ){
				var jLink = $( this );
				
				// Reset the status list.
				jStatusList.children().hide();
				
				// Load the content.
				jContent.load( jLink.attr( "href" ) );
				
				// Prevent default click.
				return( false );					
			}
			);
		
	}
	);