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

Answer 1

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.

Answer 2

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

    }           
    });
}