javascript jquery ajaxStart/ajaxStop 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7596128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ajaxStart/ajaxStop not working
提问by Keith Costa
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
我有非常简单的代码，我通过 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);
}
});
});
i just dont not understand why my above ajaxstart/ajaxstop did not work. please help me to understand why was wrong in my code.
我只是不明白为什么我上面的 ajaxstart/ajaxstop 不起作用。请帮助我理解为什么我的代码有问题。
but my ajaxstart/ajaxstop started working when i change the code a bit like
但是当我稍微更改代码时，我的 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();
});
the only change is $(document).ajaxStop(function () {instaed of
唯一的变化是$(document).ajaxStop(function () {instaed的
$("#imgHolder").ajaxStart(function () {
so please explain why my above ajaxStart/ajaxStop code did not work. thanks
所以请解释为什么我上面的 ajaxStart/ajaxStop 代码不起作用。谢谢
回答by diEcho
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.
鉴于 ajaxStart 仅在没有其他 ajax 请求正在进行时才被调用，如果您想将其用作 AJAX 加载器指示器，它是无用的。
have u tried with ( tell me is it working or not)
你有没有试过（告诉我它是否有效）
jQuery(document).ajaxStart(function(){
alert("it begins");
})
回答by volkh4n
回答by brroshan
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.
本质上将您的 loadingAnimationElement 绑定到全局触发的 ajaxStart 和 ajaxStop 事件。仅在您打算时显示。
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.
当 jQuery 未执行任何 Ajax 请求并且发起新请求时，它会触发 ajaxStart 事件。如果其他请求在第一个请求结束之前开始，这些新请求不会导致新的 ajaxStart 事件。当最后一个挂起的 Ajax 请求完成并且 jQuery 不再执行任何网络活动时，将触发 ajaxStop 事件。
回答by Ravinder Singh Bhanwar
Try this sample code:-
试试这个示例代码：-
var $loading = $('#div_Loader').hide();
$(document).ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
setTimeout(function () {
$loading.hide();
}, 1000);
});
回答by Developer
This combination works fine. Thanks to user @brroshan
这种组合效果很好。感谢用户@brroshan
JS of Master page
Master页面的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 of Master page
母版页的html
<div id="loading" class="display: none;">
<h2>Loading...</h2>
</div>
