How to implement a jQuery spinner image in an AJAX request

Question

I have an jQuery AJAX request which I want to have display an ajax spinner gif while the request loads and then disappear once the request is successful, can anyone suggest the best method to implement this into my jquery code below:

function updateCart( qty, rowid ){
$.ajax({
        type: "POST",
        url: "/cart/ajax_update_item",
        data: { rowid: rowid, qty: qty },
        dataType: 'json',
        success: function(data){                
            render_cart(data);
        }           
    });
}

possible duplicate of [How to show loading spinner in jQuery?](http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) — Donal Lafferty, Mar 22 '15 at 20:47

score 31 · Accepted Answer · edited Feb 19 '16 at 13:09

31

Get a loader gif from ajax loader (GIF images)
Place this image where you want to show/hide.
Before the ajax, show this image.
Once completed, hide the image

function updateCart( qty, rowid ){
$('.loaderImage').show();
$.ajax({
        type: "POST",
        url: "/cart/ajax_update_item",
        data: { rowid: rowid, qty: qty },
        dataType: 'json',                         
        success: function(data){                
            render_cart(data);
            $('.loaderImage').hide();
        },
        error: function (response) {
           //Handle error
           $("#progressBar").hide();

    }           
    });
}

edited Feb 19 '16 at 13:09

Matt

74,352
26
153
180

answered Oct 18 '13 at 09:06

Praveen

55,303
33
133
164

how do you mean async = false? should i change anything in the code? – Zabs Oct 18 '13 at 09:08
1

You should actually hide the loading image when the success function is called, don't you reckon? p/s: `async: false` is a bad idea unless you know what you're doing. – Terry Oct 18 '13 at 09:10
1

**Never use `async: false`**. Aside from being deprecated in the latest version of jQuery, it is not the way to solve the problem. Put the `hide()` in the callback function. – Rory McCrossan Oct 18 '13 at 09:10
Whats the reason for the error() in the ajax (sorry for if my query sounds silly) – Zabs Oct 18 '13 at 09:19
@Zabs what happens if your ajax fails? So you should be handling it so that it should not break other functionality. – Praveen Oct 18 '13 at 09:20
1

I see what you mean thats a good point :) thanks really appreciate your efforts – Zabs Oct 18 '13 at 09:27
Another loader image option is FontAwesome, especially if you are already using it in your project. Check out their animated icons here: http://fontawesome.io/examples/#animated. – Mark Rummel Dec 26 '15 at 14:43
Instead of using this `$('.loaderImage').show();` before the ajax call, you can use `beforeSend: function(){$('.loaderImage').show();}` inside the ajax call. – Mani Sankar Sep 17 '17 at 19:49

score 8 · Answer 2 · answered Sep 12 '15 at 12:12

8

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

where '#loadingDiv' is the spinner gif covering the part of the page or the complete page.

answered Sep 12 '15 at 12:12

Sachin Mour

635
7
16

where is spinner gif? – Tariq Ahmed Aug 21 '22 at 05:56

score 5 · Answer 3 · answered Oct 18 '13 at 09:05

I do it showing/hiding a div with gif image. It works like a charm:

<script type="text/javascript">

    $("#progressBar").corner();  
    $("#progressBar").show();


    jQuery.ajax({
        url: "../Nexxus/DriveController.aspx",
        type: "GET",
        async: true,
        contentType: "application/x-www-form-urlencoded",
        //data: param,
        success: function (response) {
            //Manage your response.

            //Finished processing, hide the Progress!
            $("#progressBar").hide();
        },
        error: function (response) {
            alert(response.responseText);
            $("#progressBar").hide();

        }
    });

  </script>

additionally you can use javascript Images to make the sure the image is showing up immediately. — efkah, Oct 18 '13 at 09:07

score -1 · Answer 4 · answered Mar 23 '17 at 08:30

-1

On Preloaders.net you can find a very open code along with all the explanations both in pure JavaScript and JQuery formats. You can get the loader images there too

answered Mar 23 '17 at 08:30

Timur Gafforov

771
3
10
28

How to implement a jQuery spinner image in an AJAX request

4 Answers4

Linked