在提交时加载时在按钮上显示微调器图标 [英] Show spinner icon on button while loading on submit

问题描述

我正在尝试在提交时加载按钮时显示微调器，我已经看到了几个实现并尝试在我的应用程序中但它无法正常工作。这是我想要描述的小提琴。我想提一下另一件事，这个HTML在我的侧边栏上，并通过javascript在ajax调用上添加

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>

推荐答案

我在你的代码中做了一些更改（更改了图标并编辑了CSS）以便更容易测试： http://jsfiddle.net/q1d06npq/4/

I made some changes (changed the icon and edited the CSS) in you code to be easier to test: http://jsfiddle.net/q1d06npq/4/

而不是 $ .ajax（）。done（）在你的情况下，最好的选择是使用 $。 ajax（）。always（）即使ajax失败也会执行。

Instead of $.ajax().done() the best option in you case is to use the $.ajax().always() that is executed even if the ajax fails.

代码 $（this）回调函数里面的不会指向按钮，解决你可以使用这样的东西： var elem = $（event.currentTarget）;

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屋！