twitter-bootstrap Bootstrap 按钮加载 + Ajax
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15197537/
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
Bootstrap button loading + Ajax
提问by user0103
I'm using Twitter Bootstrap's button loading state (http://twitter.github.com/bootstrap/javascript.html#buttons).
我正在使用 Twitter Bootstrap 的按钮加载状态 ( http://twitter.github.com/bootstrap/javascript.html#buttons)。
HTML:
<input type="submit" class="btn" value="Register" id="accountRegister" data-loading-text="Loading..."/>
JS:
(function ($, undefined) {
$("#accountRegister").click(function () {
$(this).button('loading');
$.ajax({
type:"POST",
url:"/?/register/",
data:$("#loginForm").serialize(),
error:function (xhr, ajaxOptions, thrownError) {
$("#accountRegister").button('reset');
},
success:function (data) {
$("#accountRegister").button('reset');
}
});
return false;
})
})(jQuery);
But if I have many buttons I need to write many functions (?). Of course I can make something like this:
但是如果我有很多按钮，我需要编写很多功能（？）。当然我可以做这样的事情：
$(".ajax-button").bind("click", function() {
$(this).button("loading");})
And I can use jQuery Ajax event ajaxComplete
我可以使用 jQuery Ajax 事件 ajaxComplete
$(".ajax-button").bind("ajaxComplete", function() {
$(this).button("reset");})
But this way ALLbuttons will be set to normal state when anyAjax request completed.
但是这样当任何Ajax 请求完成时，所有按钮都将设置为正常状态。
If user will click on button1and then click on button2(both buttons are sending Ajax request), they will be set to normal state when first Ajax request is completed. How to determine which button I need to set to a normal state?
如果用户先点击button1再点击button2（两个按钮都在发送 Ajax 请求），当第一个 Ajax 请求完成时，它们将被设置为正常状态。如何确定我需要将哪个按钮设置为正常状态？
Thank you in advance.
先感谢您。
UPDATE
更新
All I need is determine which button triggered some action (Ajax request), set it state to loadingand when Ajax request will be completed set it state to normal.
我需要的只是确定哪个按钮触发了某个操作（Ajax 请求），将其状态设置为正在加载，并在 Ajax 请求完成时将其状态设置为正常。
采纳答案by user0103
I found solution for my question =) After reading jQuery documentation I wrote this code for my system:
我为我的问题找到了解决方案 =) 在阅读了 jQuery 文档后，我为我的系统编写了这段代码：
core.js:
核心.js：
(function ($, undefined) {
$.ajaxSetup({
beforeSend:function (xhr, settings) {
if (settings.context != undefined && settings.context.hasClass('btn')) {
settings.context.button('loading');
}
},
complete:function () {
this.button('reset');
}
});
})(jQuery);
account.js:
帐户.js：
(function ($, undefined) {
$("#accountRegister").click(function () {
$.ajax({
context:$(this), // You need to set context to 'this' element
//some code here
});
return false;
})
})(jQuery);
This works perfectly. Hope that this will be useful for someone.
这完美地工作。希望这对某人有用。
