How to show ajax indicator for nested ajax call?

How to show ajax indicator for nested ajax call?

I have made an ajax indicator and registered it to the global ajax event:

  1. $("<div></div>")
  2. .attr('id', 'ajaxLoader')
  3. .text('Loading...')
  4. .appendTo("body")
  5. .bgIframe()
  6. .bind("ajaxSend", function(ev){ 
  7. console.log("ajaxSend");
  8. $(this).show(); 
  9. })
  10. .bind("ajaxComplete", function(ev){
  11. console.log('ajaxComplete');
  12. $(this).hide(); 
  13. });

Then I have an ajax request like (using validation and ajaxForm plugin):

  1. $("#form").validate({
  2. submitHandler: function(){
  3. $("#form").ajaxSubmit({
  4. success: function(response, data){
  5. console.log("before load");
  6. $("#someUi").load("/someUrl.rpc");
  7. }
  8. });
  9. }
  10. });

It turns out that the ajax indicator is hidden when calling .load(), the console.log shows:

  1. ajaxSend
  2. [XHR.....]
  3. before load
  4. ajaxSend
  5. ajaxComplete
  6. [XHR.....]
  7. ajaxComplete

So the indicator is hidden by the first ajax complete call because of the nested nature of the code. So I have to implement something so that ajaxComplete will check if there is any ajax activity in the way and do not hide the indicator. Any suggestion to this?