Question

我正在尝试在提交时加载按钮时显示微调器，我已经看到了几个实现并尝试在我的应用程序中但它无法正常工作。这是我要描述的fiddle。我想提一下这个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>

Answer 1

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

除了$.ajax().done()之外，最好的选择是使用即使ajax失败也执行的$.ajax().always()。

回调函数中的代码$(this)不会指向该按钮，以解决您可以使用以下内容：var elem = $(event.currentTarget);

Answer 2

单击按钮后，您可以使用jQuery替换按钮.xt。我在之前的项目中使用了这个：

jQuery(".submit-btn span").html('<i class="fa fa-refresh fa-lg fa-spin" style="color: #ffffff;"></i>');

这将实际按钮文本替换为旋转图标...处理完成后，您可以将其更改回原始文本...

Answer 3

我在问题中发现了这个问题。其实我在做

async:false in my AJAX call.

这就是在调用之后执行ajax调用之前“添加类”的原因。

我从以下问题中发现了这一点。

jquery ajax beforesend

Answer 4

问题是你在$ .ajax中的代码执行之前删除了活动类。

有几种方法可以将（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');
        });

    });
})();

Answer 5

您可以使用以下代码实现此目的：

var $loading = $('.spinner').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

在提交时加载时在按钮上显示微调器图标

5 个答案: