Right now it contacts the server every time a user toggles "Comments (X)"
现在,每当用户切换“评论(X)”时它就会联系服务器
I'd like to make it so as soon as a user clicks ".info .reply" (Comments (X)), an ajax loader appears just until the data is finished loading, then the loader disappears.
我想在用户点击“.info .reply”(评论(X))时立即创建,只有在数据加载完成之前出现ajax加载器,然后加载器消失。
// Replies - Toggle display of comments
$('.info .reply').click( function() {
$('.reply', this.parentNode.parentNode).toggle();
return false;
});
// Load comments
$('.info .reply', this).mousedown( function() {
var id = $('form #id', this.parentNode.parentNode).val();
$.ajax({ url: location.href, type: 'post', data: 'id=' + id, dataType: 'json',
success: function(data) {
for (var i in data) {
// Do AJAX Updates
}
}
});
return false;
});
What's the proper way to do this?
这样做的正确方法是什么?
Thanks!
2 个解决方案
#1
7
Basically
Show the image on mousedown using show() or fadeIn() or whatever tickles your fancy, then hide it inside your success callback. Like this
使用show()或fadeIn()显示mousedown上的图像或者您喜欢的任何痒,然后将其隐藏在成功回调中。喜欢这个
$('.info .reply', this).mousedown( function() {
$("#loading-image").show(); // Show the progress indicator
var id = $('form #id', this.parentNode.parentNode).val();
$.ajax({ url: location.href, type: 'post', data: 'id=' + id, dataType: 'json',
success: function(data) {
$("#loading-image").hide(); // Hide the progress indicator
for (var i in data) {
// Do AJAX Updates
}
}
});
return false;
});
#2
3
You can use a plugin such as jQuery BlockUI to do this. Just call $.blockUI()
before calling $.ajax
. Then at the end of the success
event, call $.unblockUI()
.
您可以使用jQuery BlockUI等插件来执行此操作。只需在调用$ .ajax之前调用$ .blockUI()。然后在成功事件结束时,调用$ .unblockUI()。
#1
7
Basically
Show the image on mousedown using show() or fadeIn() or whatever tickles your fancy, then hide it inside your success callback. Like this
使用show()或fadeIn()显示mousedown上的图像或者您喜欢的任何痒,然后将其隐藏在成功回调中。喜欢这个
$('.info .reply', this).mousedown( function() {
$("#loading-image").show(); // Show the progress indicator
var id = $('form #id', this.parentNode.parentNode).val();
$.ajax({ url: location.href, type: 'post', data: 'id=' + id, dataType: 'json',
success: function(data) {
$("#loading-image").hide(); // Hide the progress indicator
for (var i in data) {
// Do AJAX Updates
}
}
});
return false;
});
#2
3
You can use a plugin such as jQuery BlockUI to do this. Just call $.blockUI()
before calling $.ajax
. Then at the end of the success
event, call $.unblockUI()
.
您可以使用jQuery BlockUI等插件来执行此操作。只需在调用$ .ajax之前调用$ .blockUI()。然后在成功事件结束时,调用$ .unblockUI()。