CODEWITHSUNDEEP
jqueryajaxjson
Zabs
Zabs

Reputation: 14142

How to implement a jQuery spinner image in an AJAX request

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

Upvotes: 13

Views: 56296

Answers (4)

Timur Gafforov
Timur Gafforov

Reputation: 761

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

Upvotes: -1

Praveen
Praveen

Reputation: 56501

  1. Get a loader gif from ajax loader (GIF images)
  2. Place this image where you want to show/hide.
  3. Before the ajax, show this image.
  4. 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();

    }           
    });
}

Upvotes: 32

Sachin Mour
Sachin Mour

Reputation: 635

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.

Upvotes: 8

Carlos Landeras
Carlos Landeras

Reputation: 11063

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>

Upvotes: 5

Related Questions