progress bar not showing before ajax call?

Question

I want to implement the progress bar before the first ajax call initiating and want to close once the 1st call over getting over and then again i want initiate the progress bar for 2nd ajax call and want to close when the 2nd ajax call getting complete.

I tried but it's not showing. It's calling and same time it's closing because of ajax call and i here i don't know the exact time ajax call and i can't use setTimeOut also for closing.

here is the code. please help me anyone to achieve this.

var getResponseFromSOA = function(filterObject, file,verb, callback) {      
        createFilterString(filterObject, function(filterString) {// get the filter string
            if(jQuery) {// check the jQuery file is integrated or not
                var headers = {Authorization: COOKIES.readCookie("Authorization"),requestmode:"ACK_URL"};
                headers.isRender = file.isRender;
                if(file.inputDataHeaders)
                    headers.inputData = file.inputDataHeaders;


            // Here i want to show be ajax call
                  $progressBar.kendoProgressBarShow();


                    jQuery.ajax({
                        url: file.fileUrl + "/" + $securityComponent.cryptograghicFunctions.encryptor(filterString),
                        type: verb,
                        headers: headers,
                        async: false,
                    /*  beforeSend: function() {
                             $progressBar.kendoProgressBarShow();
                        },*/
                        error : function()
                        {
                            console.log("some error occured at getResponseFromSOA submitting the request");
                        },
                        success: function(responseDataFromRequestHandler) {                         
                            console.log(responseDataFromRequestHandler);                            
                            // again call because it is async mode form SOA team
                            jQuery.ajax({
                                url: responseDataFromRequestHandler.links[1].href,
                                async: false,
                                headers: {Authorization: COOKIES.readCookie("Authorization"),requestmode:"ACK_URL"},
                                success: function(responseDataFromResponseHandler) {
                                    try {
                                        console.log(responseDataFromResponseHandler);
                                        if(callback) callback(responseDataFromResponseHandler.data);

                                    }catch(e) {
                                        console.log(responseDataFromResponseHandler);
                                        // printing the error message in the console window
                                        console.log("Error in the callback in data-transactor-js > getResponseFromSOA"
                                                + "\n"
                                                + e.message);
                                    }
                                },                          
                                complete: function() {                               
                                     // Here i want to close the progressBar or last below it's commented mode
                                    $progressBar.kendoProgressBarHide();

                                }
                            });
                        },
                        complete: function() {                          
                             // Here i want to close the progressBar    or last below it's commented mode
                            $progressBar.kendoProgressBarHide();
                        }
                    });
                     // If it's not possible there then i want to close here.
                        //$progressBar.kendoProgressBarHide();


            } else throw {message: "jQuery is not defined or jQuery file is not linked"};
        });
    };

Here is Porgress API code.

$progressBar = {    
    kendoProgressBarShow : function() {
        if (jQuery) {
            kendo.ui.progress($("#progressBar"), true);
        } else {
            console.log("jQuery not found");
        }
    },
    kendoProgressBarHide : function() {
        if (jQuery) {
            kendo.ui.progress($("#progressBar"), false);
        } else {
            console.log("jQuery not found");
        }
    }
};

Answer 1

You can try this type of logic in your program.

$('#clickfun').click(function() {
    $(this).after('<div id="loading">Loading...</div>');
    for(var i=0;i<5;i++){


    setTimeout(function() {
        $.ajax({
            url: '/echo/html/',
            type: 'post',
            async: false,
            data: {
                html: '<p>Hello Friends</p>'+i,

            },
            success: function(data) {
                console.log(data);
                $('#clickfun').after(data + i);
            },
            error: function() {
                alert('Error found');
            },
            complete: function() {
                $('#loading').remove();
            }
        });
    }, 0);
    }
});

Answer 2

Progress bar is not showing when a ajax call is made and async: false

UI freeze

Hence try setting async: true

or you can find the solution in below link

https://codesave.wordpress.com/2013/09/25/ajax-call-freezes-ui-animation-locked-ui-during-ajax-call/