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

Answer 1

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

    }           
    });
}