剑道进度条在进行 ajax 调用时未启动
Kendo Progress bar not initiating while making ajax call
我想为我的服务器端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>
提前感谢...
这里有几件事。
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.我想您已经知道这一点,但是在任何类型的进度指示器上设置预定义的超时值都不是一个好主意,因为您无法知道该过程需要多长时间。
- 阻止在select2单击时调用ajax
- 调用Ajax并返回响应
- Ajax:只在元素存在的情况下调用Ajax
- PHP,MySQL,AJAX-调用AJAX结果后,Bootstrap CSS样式不会显示
- 调用Ajax内部的函数
- 无法获取属性'的值;拆分'在IE8中调用ajax之后
- 我们如何在Firefox中调用AJAX
- Rails:通过调用Ajax重定向
- Cookie 在 Spotify (Javascript) 中调用 ajax 后未保存
- 通过调用 Ajax 来设置 struts bean 值
- 无法从服务器中的 php 调用 Ajax 函数
- 如何在附加表行时调用 ajax
- 在facebook用户发送邀请请求后调用ajax调用
- 定期调用Ajax
- 调用Ajax生成的表单的值
- 无法调用ajax函数
- 在调用AJAX之后显示ng控制器的内容;作为“;作用
- CSS,Java脚本在php中调用ajax后无法正常工作
- 成功调用AJAX后,Toast Growl不会出现
- 如何在调用AJAX时记录或捕获信息和错误