Over the weekend I was fiddling was some code to see how to make a generic activity indicator for Ajax requests. I'm sure most of you have seen these but if not, here's one similar to what Facebook uses:

<a href="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/facebook.gif" alt="" title="facebook" width="16" height="11" class="alignright size-full wp-image-948" /></a>

While it's may not look like much, that animated .gif is pretty important because it tells a user that something is happening and that results will appear shortly. The last thing you want is for a user to think the page has locked up or broken and using this simple method advises them that their request is being processed.

<h2>Targeted Indicators</h2>

In my case, I was looking for a way to set an indicator within the specific DOM element that would be affected by the XHR call. So if my XHR call was to set the contents of a specific DIV, I wanted the indicator to render within that specific DIV only (similar to what Facebook does). 

First, I created three DIVs and 3 anchor tags:

[code lang="html"]
&lt;a href=&quot;#&quot;&gt;Box 1&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 2&lt;/a&gt;|&lt;a href=&quot;#&quot;&gt;Box 3&lt;/a&gt; 

&lt;br /&gt;&lt;br /&gt;

&lt;div id=&quot;box1&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div id=&quot;box2&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div id=&quot;box3&quot;&gt;&amp;nbsp;&lt;/div&gt;
[/code]

and I set the DIVs to a specific width and floated them left:

[code lang="css"]
#box1, #box2, #box3 { background-color:#E5EECC; border:1px solid #D4D4D4; width: 200px; float:left; };
[/code]

Next, I created a new method that would take the target element's ID and use that to dynamically create a new IMG tag and insert the activity indicator. What I decided to do was leverage jQuery's global Ajax events to create the generic handlers for this. Using <em>ajaxStart()</em>, which fires off when an Ajax request is initiated, I dynamically create the tag for my activity indicator and inset it using the prepend() method:

[code lang="js"]
		$(ele).ajaxStart( function() {
		
			$(this).prepend( &quot;&lt;img id='throbber' src='facebook.gif' /&gt;&quot; );
		
		})
[/code]

[code lang="js"]
	fillBox = function( ele ) {
		
		$(ele).ajaxStart( function() {
		
			$(this).prepend( &quot;&lt;img id='throbber' src='facebook.gif' /&gt;&quot; );
		
		}).ajaxStop( function() {
		
			$(&quot;#throbber&quot;).remove();
		
		});
			
		$.ajax({
		  url: 'test.php',
		  cache: false,
		  success: function(data) {
			
			$(ele).html( data ).unbind( 'ajaxStart' ).unbind( 'ajaxStop' );

		  }
		});

	};
[/code]
