Question

Actually i have trying to put an ajax loader in my application. I tried this

$(document).ajaxStart(function(){ 
  $('#ajaxBusy').show(); 
  }).ajaxStop(function(){ 
  $('#ajaxBusy').hide();
});

This is working fine. But the problem is whenever i click an element which starts an ajax request, the ajax loader(gif image) is displayed in a single place. But i dont want that i want the loader should be displayed respectively near each element which is clicked only near that element.

so i tried this,

$('.follow_count').live('click', function(){
  $(document).ajaxStart(function(){ 
   $('#ajaxBusy').show(); 
   }).ajaxStop(function(){ 
   $('#ajaxBusy').hide();
  });
});

where .follow_count (this is one of the ajaxelement) is a div element. Here i want when the .follow_count element is clicked the ajax loader should be displayed near that element.

Could any one help me out of this..

Answer 1

Maybe if you change from id to class it will work:

$('.follow_count').live('click', function(){
  $(this).ajaxStart(function(){ 
   $(this).find('.ajaxbusy').show(); 
   }).ajaxStop(function(){ 
   $(this).find('.ajaxbusy').show(); 
  });
});

ajaxBusy must be a class not an id if you will repeat it!

Here is a small example.