jquery ajaxStart/ajaxStop not working

i have very simple code that i making partial postback by jquery and i use ajaxStart/ajaxStop for doing some work. but it is not working. i just could not understand why it is not working. here is my code

$("#imgHolder").ajaxStart(function () {
 $('div#content').block({
          message: '<table><tr><td><img  src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
        css: { border: '1px solid #a00' }
        });
    $('#imgHolder').empty();
    $("#btnPrint").hide();
    });

  $("#imgHolder").ajaxStop(function () {
  $("#btnPrint").show();
  $('div#content').unblock();
 });  



$(document).ready(function () {
 $.ajax({
  type: "POST",
  url: "UPSLabelFormUK.aspx/ProcessInfo",
  data: JSON.stringify(DTO),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
  if (data.d[0].Message == "SUCCESS") {
  //alert(data.d[0].TrackNumber);
  ///alert(data.d[0].LabelImagePath);
  var _images = [data.d[0].LabelImagePath];
  $.each(_images, function (e) {
    $(new Image()).load(function () {
    $('#imgHolder').html("<img src='" + data.d[0].LabelImagePath + "' width='310' height='402' border=0/>");
  }).attr('src', this);
 });
}
 } ,
  error: function (XMLHttpRequest, textStatus, errorThrown) {
  alert(textStatus);
  }
 });
 });

i just dont not understand why m开发者_开发技巧y above ajaxstart/ajaxstop did not work. please help me to understand why was wrong in my code.

but my ajaxstart/ajaxstop started working when i change the code a bit like

        $(document).ajaxStart(function () {
            $('div#content').block({
                message: '<table><tr><td><img  src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
                css: { border: '1px solid #a00' }
            });

            $('#imgHolder').empty();
            $("#btnPrint").hide();
        });


        $(document).ajaxStop(function () {
            $("#btnPrint").show();
            $('div#content').unblock();
        });

the only change is $(document).ajaxStop(function () { instaed of

$("#imgHolder").ajaxStart(function () {

so please explain why my above ajaxStart/ajaxStop code did not work. thanks

Given the fact that ajaxStart is only called if there are no other ajax requests in progress, it makes is useless if you want to use it as an AJAX loader indicator.

have u tried with ( tell me is it working or not)

jQuery(document).ajaxStart(function(){
alert("it begins");
})

As of jQuery 1.8, the .ajaxStop() method should only be attached to document.

from jquery api web page of "ajaxStop". You can check it here.

Try this:

$("#loading").bind({
   ajaxStart: function() { $(this).show(); },
   ajaxStop: function() { $(this).hide(); }
}); 

Essentially binding your loadingAnimationElement to the globally fired ajaxStart and ajaxStop events. Only shows up when you intend it to.

When jQuery is not performing any Ajax requests and a new request is initiated, it fires an ajaxStart event. If other requests begin before this first one ends, those new requests do not cause a new ajaxStart event. The ajaxStop event is triggered when the last pending Ajax request is completed and jQuery is no longer performing any network activity.

This combination works fine. Thanks to user @brroshan

JS of Master page

<script language="JavaScript" type="text/javascript">

$(document).ajaxStart(function () {
     $("#loading").show();
});

$(function () {

// Some other code

// The end of this code block

$("#loading").hide();

$("#loading").bind({
         ajaxStart: function () { $(this).show(); },
         ajaxStop: function () { $(this).hide(); }
     });

});

</script>

html of Master page

<div id="loading" class="display: none;">
    <h2>Loading...</h2>
</div>

Try this sample code:-

 var $loading = $('#div_Loader').hide();
    $(document).ajaxStart(function () {  
         $loading.show();
    })
    .ajaxStop(function () {
        setTimeout(function () {                 
            $loading.hide();
        }, 1000);                                  
    });