@Karl -- I typically design the UX of a site to have one global indicator for all activity, because I think it's poorer design to have a dozen different throbbers all over the place. But that's just design preference.

However, ajaxStart() and ajaxEnd() are designed to only be run sort of globally when the state changes from "no ajax requests currently" to "some ajax requests currently" and vice versa. This is not a good event mapping (functionally or semantically) for having multiple throbber listeners.

You can still use the "global" Ajax events and have multiple throbbers, though. I'd suggest ajaxSend/ajaxComplete instead. You'd bind both events to each container that needed to "listen" to when an Ajax request was fired/completed for his particular content.

So, like: $("#container1, #container2, #container3").bind("ajaxSend",start_ajax).bind("ajaxComplete",end_ajax);

Then, when making an $.ajax() call, you could specify a custom property of the ajaxOptions object like "target" or something like that, and give a selector or DOM object reference (probably selector is better for avoiding memory leaks).

$.ajax({ ... , target:"#container1" });
$.ajax({ ... , target:"#container2" });

Then, all that needs to happen is something like this:

[code]
function start_ajax(e,xhr,opts) {
   var $this = $(this);
   if ($this.is(opts.target)) {
      $this.find(&quot;.throbber&quot;).show();
   }
}

function end_ajax(e,xhr,opts) {
   var $this = $(this);
   if ($this.is(opts.target)) {
      $this.find(&quot;.throbber&quot;).hide();
   }
}
[/code]