After button click, show spinner icon on button while click event in progress

Question

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>

Peruggia · Accepted Answer · 2014-09-17T19:49:06.857

5

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);

edited Sep 17 '14 at 19:49

answered Sep 17 '14 at 19:23

Peruggia

191
4

This seems to be working but only when I debug in the developer tools that is when I go step by step. – Murali Krishna Sep 17 '14 at 19:44
@MuraliKrishna I've updated the URL to use the jsfiddle mock. I think It will work now: http://jsfiddle.net/q1d06npq/4/ – Peruggia Sep 17 '14 at 19:48

score 4 · Answer 2 · edited Feb 05 '21 at 18:26

You can use jQuery to replace the button thext once the button has been clicked. I used this on a previous project:

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...

You also have to include:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

score 1 · Answer 3 · edited May 23 '17 at 12:00

1

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.

I found out this from the following question.

jquery ajax beforesend

edited May 23 '17 at 12:00

Community

1
1

answered Sep 18 '14 at 15:14

Murali Krishna

131
1
2
9

score 0 · Answer 4 · answered Sep 17 '14 at 16:52

0

the problem is that you're removing the active class before the code inside the $.ajax even executes.

There are several ways to pass in the (this) object to your $.ajax success function. here is one.

(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');
        });

    });
})();

answered Sep 17 '14 at 16:52

Zombiesplat

943
8
19

I am actually doing the remove class after the completion of the ajax call. I will edit my question, Thanks. – Murali Krishna Sep 17 '14 at 17:50
I am thinking that as I am adding the "form" through javascript later on a button click it cannot find the submit button for manipulations. If that is the case do you have any suggestions? – Murali Krishna Sep 17 '14 at 19:16
depending on your version of jQuery but I'm assuming at least 1.7 since you're using `.on()`, this will attach to the click event even if your element is added by js after page load. You might check your code to see if you have more than one element with the #submitbutton id. the id property is intended to be unique, which in this case is not entirely necessary, change the selector to a class like `'.selectbutton'` – Zombiesplat Sep 17 '14 at 19:20

score 0 · Answer 5 · answered Sep 17 '14 at 18:56

0

You can achieve this with the following code:

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

answered Sep 17 '14 at 18:56

Gangadhar Jannu

4,136
6
29
49

After button click, show spinner icon on button while click event in progress

5 Answers5

Linked