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? — Donal Lafferty
– Donal Lafferty, Commented Mar 22, 2015 at 20:47

Matt · Accepted Answer · 2016-02-19 13:09:59Z

32

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, 2016 at 13:09

Matt

75.4k26 gold badges156 silver badges181 bronze badges

answered Oct 18, 2013 at 9:06

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Zabs Over a year ago

how do you mean async = false? should i change anything in the code?

Terry Over a year ago

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.

Rory McCrossan Over a year ago

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.

Zabs Over a year ago

Whats the reason for the error() in the ajax (sorry for if my query sounds silly)

Zabs Over a year ago

I see what you mean thats a good point :) thanks really appreciate your efforts

|

Sachin Mour · Accepted Answer · 2015-09-12 12:12:49Z

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, 2015 at 12:12

Sachin Mour

6358 silver badges16 bronze badges

1 Comment

Tariq Ahmed Over a year ago

where is spinner gif?

Carlos Landeras · Accepted Answer · 2013-10-18 09:05:06Z

5

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>

answered Oct 18, 2013 at 9:05

Carlos Landeras

11.1k11 gold badges61 silver badges84 bronze badges

1 Comment

efkah Over a year ago

additionally you can use javascript Images to make the sure the image is showing up immediately.

Timur Gafforov · Accepted Answer · 2017-03-23 08:30:13Z

-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, 2017 at 8:30

Timur Gafforov

7723 gold badges11 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to implement a jQuery spinner image in an AJAX request

4 Answers 4

8 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related