jquery ajaxStart / ajaxStop不能正常工作

时间:2011-09-29 10:43:15

标签: javascript jquery

我有非常简单的代码,我通过jquery进行部分回发,并且我使用ajaxStart / ajaxStop来完成一些工作。但它不起作用。我只是不明白为什么它不起作用。 这是我的代码

$("#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);
  }
 });
 });

我只是不明白为什么我上面的ajaxstart / ajaxstop不起作用。请帮助我理解为什么我的代码出错了。

但是当我更改代码时,我的ajaxstart / ajaxstop开始工作了

        $(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();
        });

唯一的变化是$(document).ajaxStop(function () {安装

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

所以请解释为什么我上面的ajaxStart / ajaxStop代码不起作用。感谢

5 个答案:

答案 0 :(得分:6)

  

鉴于只有在没有其他的情况下才会调用ajaxStart   ajax请求正在进行中,如果你想使用它,它就没用了   作为AJAX加载器指示器。

你试过吗(告诉我它是否有效)

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

答案 1 :(得分:6)

  

从jQuery 1.8开始,.ajaxStop()方法只应附加到文档。

来自“ajaxStop”的jquery api网页。您可以查看here

答案 2 :(得分:1)

试试这个:

- (void)updateSearchResultsForSearchController:(UISearchController *)searchController {

    [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(useTextSearchQuery) object:nil];
    [self performSelector:@selector(useTextSearchQuery) withObject:nil afterDelay:1.0];

}

基本上将您的loadingAnimationElement绑定到全局触发的ajaxStart和ajaxStop事件。只有在您打算出现时才显示。

当jQuery没有执行任何Ajax请求并启动新请求时,它会触发ajaxStart事件。如果其他请求在第一个请求结束之前开始,则这些新请求不会导致新的ajaxStart事件。当最后一个挂起的Ajax请求完成且jQuery不再执行任何网络活动时,将触发ajaxStop事件。

答案 3 :(得分:0)

试试这个示例代码: -

 var $loading = $('#div_Loader').hide();
    $(document).ajaxStart(function () {

                  $loading.show();
              })
            .ajaxStop(function () {
                setTimeout(function () {

                    $loading.hide();
                }, 1000);                   

     });

答案 4 :(得分:0)

此组合效果很好。感谢用户 @brroshan

母版页的JS

<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

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