单击按钮后,在单击事件进行时在按钮上显示微调图标 [英] After button click, show spinner icon on button while click event in progress
问题描述
我试图在提交加载时在按钮上显示微调器,我已经看到了几个实现并在我的应用程序中尝试过,但它不起作用.这是我试图描述的 fiddle.我想提到另一件事,这个 HTML 在我的侧边栏上,并通过 ajax 调用中的 javascript 添加
我的JS(功能 () {$(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');})});})();
我的 CSS.微调{显示:内联块;不透明度:0;最大宽度:0;-webkit-transition:不透明度 0.25s,最大宽度 0.45s;-moz-transition:不透明度 0.25s,最大宽度 0.45s;-o-transition:不透明度 0.25s,最大宽度 0.45s;过渡:不透明度 0.25s,最大宽度 0.45s;/* 持续时间固定,因为我们为额外的隐藏宽度设置动画 */}.has-spinner.active {光标:进度;}.has-spinner.active .spinner {不透明度:1;最大宽度:50px;/* 比以往任何时候都多,注意这会影响动画持续时间 */}
我的 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>选择</button><button type="button" class="btn buttoncolor" onclick="clearFilter();">Clear</button>
我在您的代码中进行了一些更改(更改了图标并编辑了 CSS)以更易于测试:http://jsfiddle.net/q1d06npq/4/
代替 $.ajax().done()
在你的情况下最好的选择是使用执行的 $.ajax().always()
即使 ajax 失败.
回调函数中的代码$(this)
不会指向按钮,可以用这样的方法解决:var elem = $(event.currentTarget);
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 fiddle which 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
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>
I made some changes (changed the icon and edited the CSS) in you code to be easier to test: 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.
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);
这篇关于单击按钮后,在单击事件进行时在按钮上显示微调图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!