ajax before send loader error

Question

i am sending ajax request with drop down change, and showing a loader div using before send, now error is this the loader only shows for first time but ajax is working all the time

Website is live, you can check live

go to http://doctorsnearu.com/ choose city choose specialization, then click find dr. you will me moved to new page now change your search using drop downs.. you will see the loader for the first time but not after that.. but ajax will work..

my code is

$(document).ready(function(){
$('[data-load="again"]').click(function(e) {

     var a=$(this).val();

     var b=$(this).attr('data-type');


  $.ajax({
   type: "POST",
   url: "gve_dr.php",
   data: "val="+a+"&type="+b,
   success: function(html){

         //alert(html);
         //response frm php file

   $("#load_drs").html(html);

   },

   beforeSend:function()
   {
    $("#olay").css('display','block');
//#olay is the div containing loader
   }
  });
     return true;
 });
});

// JavaScript Document

//#olay is the div containing loader

can any body help me

Answer 1

move this

$("#olay").css('display','block'); //#olay is the div containing loader 

before the $.ajax() is called, that means the div will show once you click the button.

and then add this

   complete: function() { 
       $("#olay").css('display','none');
   }

to your ajax method options.