This question is locked. New answers and comments are not allowed.
The app.showLoading() method appears to only work when used before a setTimeout() function is called. I have noticed that all the demos that display the "loading" icon for a few seconds and then it dissappears, works great when calling setTimeout() function directly after calling app.showLoading(). However, in a real environment, we won't be using setTimeout(). I have tried making ajax calls that take a long time to return, and then call the app.hideLoading() function to stop showing the icon. However, the loading icon is never shown. No matter what I do, no "loading" icon is shown. Below is the code to show what I mean. I copied this from the Kendo UI Dojo. the only difference is that I commented out the setTimeout() function and replaced it with a loop that takes a few seconds to run that will just inject some numbers into the html on the page. If you run it you'll see that indeed, the loading icon is never displayed, no matter how long it takes to render the html.
How can I make this work in my hybrid mobile app? I need to display the icon when I make and ajax call and then hide it when it has completed. I have tried a million ways, but it only works if I put my ajax call inside a setTimeout function, and that doesn't make any sense to do that.
Any ideas on how I can get this to work?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<style>
.small {font-size:.5em}
</style>
</head>
<body>
<div data-role="view">
<a data-role="button" data-click="showLoading">Show loading</a>
<div id="write-to-page" class="small">Start here: </div>
</div>
<script>
var app = new kendo.mobile.Application();
function showLoading() {
app.showLoading();
/* don't use this setTimeout function
setTimeout(function() {
app.changeLoadingMessage("Please wait!");
}, 1000);
*/
// do this instead of using setTimeout(). this will take a couple of seconds.
for(var i = 0; i < 100000; i++) {
$('#write-to-page').append(i.toString() + ', ');
}
// now hide the loading image
app.hideLoading();
}
</script>
</body>
</html>
How can I make this work in my hybrid mobile app? I need to display the icon when I make and ajax call and then hide it when it has completed. I have tried a million ways, but it only works if I put my ajax call inside a setTimeout function, and that doesn't make any sense to do that.
Any ideas on how I can get this to work?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<style>
.small {font-size:.5em}
</style>
</head>
<body>
<div data-role="view">
<a data-role="button" data-click="showLoading">Show loading</a>
<div id="write-to-page" class="small">Start here: </div>
</div>
<script>
var app = new kendo.mobile.Application();
function showLoading() {
app.showLoading();
/* don't use this setTimeout function
setTimeout(function() {
app.changeLoadingMessage("Please wait!");
}, 1000);
*/
// do this instead of using setTimeout(). this will take a couple of seconds.
for(var i = 0; i < 100000; i++) {
$('#write-to-page').append(i.toString() + ', ');
}
// now hide the loading image
app.hideLoading();
}
</script>
</body>
</html>
1 Answer, 1 is accepted
0
Hello Dan,
The problem comes from the fact that JavaScript is asynchronous in its nature. So the for loop is executed along with the rest of your code, and this is why you cannot see the loading animation. A viable workaround is to implement web worker that will execute the loop in the background, so you can show hide the animation on start/end of the web worker. You can read more about them here:
https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
It is also important to know where WebWorkers are supported:
http://caniuse.com/#search=web%20worker
Regards,
Kiril Nikolov
Telerik
The problem comes from the fact that JavaScript is asynchronous in its nature. So the for loop is executed along with the rest of your code, and this is why you cannot see the loading animation. A viable workaround is to implement web worker that will execute the loop in the background, so you can show hide the animation on start/end of the web worker. You can read more about them here:
https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers
It is also important to know where WebWorkers are supported:
http://caniuse.com/#search=web%20worker
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!