Javascript 在提交时加载时在按钮上显示微调器图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25895916/
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
Show spinner icon on button while loading on submit
提问by Murali Krishna
I'm trying to show spinner on button while loading on submit, I have seen a couple of implementations and tried in my application but its not working. Here is the fiddlewhich I am trying to describe. I want to mention one other thing that this HTML is on my sidebar and being added through javascript on ajax call
我试图在提交加载时在按钮上显示微调器，我已经看到了几个实现并在我的应用程序中尝试过，但它不起作用。这是我试图描述的小提琴。我想提到另一件事，这个 HTML 在我的侧边栏上，并通过 ajax 调用中的 javascript 添加
My JS
(function () {
$(document).on("click","#submitbutton", function (event) {
$(this).addClass('active');
var formdata = $("#filterdata").serializeArray();
var url1 = "/SelectUnit";
$.ajax({url: url1, data: formdata, type: 'GET', async:false .....}).done(function(){
$(this).removeClass('active');
})
});
})();
My CSS
.spinner {
display: inline-block;
opacity: 0;
max-width: 0;
-webkit-transition: opacity 0.25s, max-width 0.45s;
-moz-transition: opacity 0.25s, max-width 0.45s;
-o-transition: opacity 0.25s, max-width 0.45s;
transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}
.has-spinner.active {
cursor:progress;
}
.has-spinner.active .spinner {
opacity: 1;
max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}My HTML
<div class="formbuttons">
<button type="button" id="submitbutton" class="btn buttoncolor has-spinner">
<span class="spinner"><i class="icon-spin icon-refresh"></i></span>Select</button>
<button type="button" class="btn buttoncolor" onclick="clearFilter();">Clear</button>
</div>采纳答案by Peruggia
I made some changes (changed the icon and edited the CSS) in you code to be easier to test: http://jsfiddle.net/q1d06npq/4/
我在您的代码中进行了一些更改（更改了图标并编辑了 CSS）以更易于测试：http: //jsfiddle.net/q1d06npq/4/
Instead of $.ajax().done()the best option in you case is to use the $.ajax().always()that is executed even if the ajax fails.
而不是$.ajax().done()在你的情况下，最好的选择是使用$.ajax().always()是即使阿贾克斯未能执行。
The code $(this)inside the callback function will not point to the button, to solve that you can use something like this: var elem = $(event.currentTarget);
$(this)回调函数内部的代码不会指向按钮，解决这个问题可以使用这样的：var elem = $(event.currentTarget);
回答by swiss_blade
You can use jQuery to replace the button thext once the button has been clicked. I used this on a previous project:
单击按钮后，您可以使用 jQuery 替换按钮。我在以前的项目中使用过这个：
jQuery(".submit-btn span").html('<i class="fa fa-refresh fa-lg fa-spin" style="color: #ffffff;"></i>');
This replaced the actual button text with the spinning icon... You can change it back to the original text after the processing is done...
这用旋转图标替换了实际的按钮文本...您可以在处理完成后将其更改回原始文本...
回答by Murali Krishna
I found out the issue in my question. Actually I was doing
我在我的问题中发现了这个问题。其实我在做
async:false in my AJAX call.
which is why 'adding the class' before the ajax call is being executed after the call.
这就是为什么在调用之后执行 ajax 调用之前“添加类”的原因。
I found out this from the following question.
我从以下问题中发现了这一点。
回答by Zombiesplat
the problem is that you're removing the active class before the code inside the $.ajax even executes.
问题是您在 $.ajax 中的代码甚至执行之前删除了活动类。
There are several ways to pass in the (this) object to your $.ajax success function. here is one.
有几种方法可以将 (this) 对象传递给 $.ajax 成功函数。这是一个。
(function () {
$(document).on("click","#submitbutton", function (event) {
$(this).addClass('active');
var formdata = $("#filterdata").serializeArray();
var url1 = "/SelectUnit";
$.ajax({
context: this,
url: 'whatever.php'
}).done(function(){
$(this).removeClass('active');
});
});
})();
回答by Gangadhar JANNU
You can achieve this with the following code:
您可以使用以下代码实现此目的：
var $loading = $('.spinner').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
