Панель Kendo Progress не инициируется во время вызова ajax

Question

Я хочу реализовать индикатор выполнения Kendo для моего ajax-вызова на стороне сервера. Я пытался, но он не инициируется перед вызовом ajax, и если я использую функцию setTimeOut ниже для закрытия вызова ajax, индикатор выполнения отображается только в течение короткого времени. Например:

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

В приведенном выше коде индикатор выполнения отображается только в течение 5000 миллисекунд, после чего он закрывается. Вот мое актуальное требование.

Мне нужно сделать два Ajax-вызова, один внутри другого. Я хочу реализовать индикатор выполнения до начала первого вызова ajax и хочу закрыть его после завершения второго вызова ajax. Другой вариант заключается в реализации индикатора выполнения до того, как первый вызов ajax инициируется, и его закрытии после завершения первого вызова, затем инициировании индикатора выполнения для второго вызова ajax и его закрытии после завершения второго вызова ajax.

Я надеюсь, что мое требование ясно. Если вам нужно больше деталей, пожалуйста, дайте мне знать. Вот мой код:

 <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>

Заранее спасибо...

Answer 1

Несколько вещей здесь.
1. Kendo использует JQuery, но вы пытаетесь инициализировать виджет прогресса до инициализации обработчика JQuery. Всегда помещайте код Kendo в обработчик JQuery и обязательно включайте ссылку на библиотеку JQuery перед вашими скриптами Kendo.

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

    // Make your ajax call here
}

2. Убедитесь, что введенный вами код отключает индикатор выполнения в каждом возможном пути кода, иначе он будет работать бесконечно, и ваши пользователи не смогут продолжить. В вашем примере у вас есть kendo.ui.progress($("#progressBar"), false в обработчике Complete для второго вызова, но не для первого. Если пользователь получит сообщение об ошибке при первом вызове, индикатор выполнения никогда не будет отключен.

3. Вы отключаете асинхронный режим здесь, в коде, но ваш комментарий заставляет меня думать, что вы этого не хотите. async:false здесь не требуется, так как вы делаете второй вызов AJAX в случае успеха первого. Делая это таким образом, вы сами контролируете порядок выполнения вызовов.

4. Я думаю, что вы уже знаете это, но установка заранее заданного значения времени ожидания для любого типа индикатора прогресса не является хорошей идеей, потому что у вас нет способа узнать, сколько времени займет этот процесс.