-1

this might have been discussed previously but i didn't find any proper or working answer. i want a generic ajax loader that shows loader gif/animation on every ajax call. now the issue is that if two ajax requests were made at the same time (in real scenario there might be dozen ajax calls running simultaneously)if first ajax request completes first it will close the loading gif but second request is still running.. is there any way i can make sure in generic ajax function that only close the loader gif/animation if there's currently no ajax request processing?

function CallMethod(url, parameters, successCallback) {
                //show loading... image

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: JSON.stringify(parameters),
                    contentType: 'application/json;',
                    dataType: 'json',
                    success: successCallback,
                    error: function(xhr, textStatus, errorThrown) {
                        console.log('error');
                    }
                });
            }

CallMethod(url, pars, onSuccess);

function onSuccess(param) {
    //remove loading... image
    //do something with the response
}

this is the code i have seen here already on this link jquery - creating a generic ajax function

Jazz
  • 3
  • 5

1 Answers1

0

It is possible to keep track of active ajax calls initiated through generic ajax method by the help of a global variable and a loader method that shows/hides loading image.

// GLobal Variable to keep track ajax requests through ajax
var totalAjaxCalls = 0;
function loader(flag) {
    if (flag) {
        if (totalAjaxCalls == 0) {
            // Show Loader
        }
        totalAjaxCalls++;
    } else {
        totalAjaxCalls--;
        if (totalAjaxCalls == 0) {
            // Hide Loader
        }
    }
}
function CallMethod(url, parameters, successCallback) {
    loader(true); // << Show Loader
    $.ajax({
        type: 'POST',
        url: url,
        data: JSON.stringify(parameters),
        contentType: 'application/json;',
        dataType: 'json',
        success: function(data, textStatus, jqXHR) {
            loader(false); // << Hide Loader
            successCallback(data, textStatus, jqXHR)
        },
        error: function(xhr, textStatus, errorThrown) {
            loader(false); // << Hide Loader
            console.log('error');
        }
    });
}
Wazeed
  • 1,230
  • 1
  • 8
  • 9
  • thanks i will try this and get back with the result – Jazz Apr 02 '21 at 19:19
  • what about using this? $(document).bind("ajaxSend", function(event, jqxhr, settings){ $('#coverScreen').show(); }).bind("ajaxComplete", function(){ // alert("Complete");// $('#coverScreen').hide(); }); – Jazz Apr 02 '21 at 19:23
  • what if method is get?i was looking for a solution where i can simply make an ajax call from any page of the web app and use this function $(document).bind("ajaxSend", function(event, jqxhr, settings){ $('#coverScreen').show(); }).bind("ajaxComplete", function(){ // alert("Complete");// $('#coverScreen').hide(); }); to show or hide the loader gif as i don't to pass url and parameters to this CallMethod – Jazz Apr 02 '21 at 19:28
  • Can use the loader function even in this case. `loader(true)` to show, `loader(false)` to hide. – Wazeed Apr 03 '21 at 00:48