Kendo Progress bar not initiating while making ajax call

Question

I want to implement the Kendo progress bar for my server side ajax call. I tried but it's not initiating before the ajax call, and if I use the setTimeOut function below for closing the ajax call, the progress bar only displays for a short duration. For example:

 setTimeout ( function() 
       {
        kendo.ui.progress($("#progressBar"), false); //close the progress bar       
       },5000);

In the above code, the progress bar only shows for 5000 milliseconds, after which it closes. Here is my actual requirement.

I need to have two ajax calls, one inside another. I want to implement the progress bar before the first ajax call initiates and want to close after the 2nd ajax call completes. Another option would be to implement the progress bar before the first ajax call initiates and close it once the 1st call is complete, then initiate the progress bar for the 2nd ajax call and close when the 2nd ajax call is complete.

I hope my requirement is clear. If you need more details please let me know. Here is my code:

 <div id="progressBar"></div>

   <script> 
        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;
            /*
             * Since it is async call that's why call will be 2 times.
             * 1st time we have to call to the request handler of the SOA.
             * In the response we will get one link address of response handler.
             * 2nd time we have to call that link what we got from the 1st request.
             * Response handler will give actual data in the data property of the response
             */

                    kendo.ui.progress($("#progressBar"), true); //Here progress bar will initiate

                jQuery.ajax({
                    url: file.fileUrl + "/" + $securityComponent.cryptograghicFunctions.encryptor(filterString),
                    type: verb,
                    headers: headers,
                    async: false,
                    error : function()
                    {
                        console.log("some error occured at getResponseFromSOA submitting the request");
                    },
                    success: function(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() {

                                    kendo.ui.progress($("#progressBar"), false); //close the progress bar       

                            }
                        });
                    },
                    complete: function() {                          
                            kendo.ui.progress($("#progressBar"), false); //close the progress bar       

                    }
                });


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

</script>

Thanks in advance...

Answer 1

A few things here.
1. Kendo relies on JQuery but you're trying to initialize the progress widget before the JQuery handler initializes. Always place Kendo code inside the JQuery handler, and be sure to include the reference to JQuery library before your Kendo scripts.

<script>
$(function ()
{
    kendo.ui.progress($("#progressBar"), true);

    // Make your ajax call here
}

2. Make sure your put code to turn off the progress bar in every possible code path or it will run indefinitely and your users won't be able to proceed. In your example, you have kendo.ui.progress($("#progressBar"), false in the Complete handler for the second call, but not the first. If the user were to get an error on the first call, the progress bar would never be turned off.

3. You're disabling async mode here in code, but your comment makes me think you don't mean to. async:false isn't necessary here since you are making the 2nd AJAX call in the success of the first. In doing it this way, you control the execution order of the calls yourself.

4. I think you know this already, but setting a pre-defined timeout value on any kind of progress indicator isn't a good idea, because you have no way of knowing just how long that process will take.