Kendo 调用 ajax 时进度条未启动

Question

我想为我的服务器端 ajax 调用实现 Kendo 进度条。我试过了，但它没有在 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 处理程序中，并确保在 Kendo 脚本之前包含对 JQuery 库的引用。

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

    // Make your ajax call here
}

2。确保您的 put 代码在每个可能的代码路径中关闭进度条，否则它会运行无限期并且您的用户将无法继续。在您的示例中，第二次调用的 Complete 处理程序中有 kendo.ui.progress($("#progressBar"), false，但第一次调用没有。如果用户在第一次调用时出错，进度条将永远不会关闭。

3. 你在代码中禁用了异步模式，但你的评论让我觉得你不是故意的。 async:false 在这里不是必需的，因为您是在第一个成功的情况下进行第二次 AJAX 调用。通过这种方式，您可以自己控制调用的执行顺序。

4. 我想您已经知道这一点，但是在任何类型的进度指示器上设置预定义的超时值都不是一个好主意，因为您无法知道该过程需要多长时间。

Kendo 调用 ajax 时进度条未启动

Kendo Progress bar not initiating while making ajax call

javascript

ajax

jquery

kendo-ui

kendo-progressbar