
Shoji Kaburagi
Top achievements
Rank 1
Shoji Kaburagi
asked on 09 Jul 2013, 10:24 AM
Hello.
I am trying to show loading popup when a user logs-in to the system. The popup shows up OK, but the circle animation does not show like the example does. How can I show it? My code is below:
$("#loginButton").click(function ()
{
.....
kendoMobileApplication.showLoading(); //show loading popup
var url = "some url";
$.post(url, { UserName: username, Password: password },
function (result)
{
kendoMobileApplication.hideLoading(); //hide loading popup
...
}
Regards.
I am trying to show loading popup when a user logs-in to the system. The popup shows up OK, but the circle animation does not show like the example does. How can I show it? My code is below:
$("#loginButton").click(function ()
{
.....
kendoMobileApplication.showLoading(); //show loading popup
var url = "some url";
$.post(url, { UserName: username, Password: password },
function (result)
{
kendoMobileApplication.hideLoading(); //hide loading popup
...
}
Regards.
9 Answers, 1 is accepted
0
Hello Shoji,
You can use showLoading() or hideLoading() methods of the Kendo Application to show or hide the loading animation:
Kiril Nikolov
Telerik
You can use showLoading() or hideLoading() methods of the Kendo Application to show or hide the loading animation:
<
script
>
var app = new kendo.mobile.Application();
</
script
>
...
<
script
>
app.showLoading();
app.hideLoading();
</
script
>
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Shoji Kaburagi
Top achievements
Rank 1
answered on 09 Jul 2013, 12:31 PM
Yes, the black dialog box with "Loading..." message shows, but the animation within it is not showing. What am I doing wrong?
0
Hello Shoji,
Please check if you have included all the required css files from the Kendo UI package, as this is the most possible reason for the mentioned behaviour. If the problem persist, please extract a JSBin/JSFiddle sample (with all the required files) that we can investigate.
Thank you in advance.
Regards,
Kiril Nikolov
Telerik
Please check if you have included all the required css files from the Kendo UI package, as this is the most possible reason for the mentioned behaviour. If the problem persist, please extract a JSBin/JSFiddle sample (with all the required files) that we can investigate.
Thank you in advance.
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Shoji Kaburagi
Top achievements
Rank 1
answered on 09 Jul 2013, 03:04 PM
Are these not sufficient references?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="/Scripts/KendoUI/jquery-1.7.1.js"></script>
<script src="/Scripts/KendoUI/kendo.mobile.min.js"></script>
<script src="/Scripts/KendoUI/shared/console.js"></script>
<link href="/Content/KendoUI/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/KendoUI/kendo.mobile.all.min.css" rel="stylesheet" />
I put the images under /Content/KendoUI/images and I see the icon png files. What am I missing?
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="/Scripts/KendoUI/jquery-1.7.1.js"></script>
<script src="/Scripts/KendoUI/kendo.mobile.min.js"></script>
<script src="/Scripts/KendoUI/shared/console.js"></script>
<link href="/Content/KendoUI/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/KendoUI/kendo.mobile.all.min.css" rel="stylesheet" />
I put the images under /Content/KendoUI/images and I see the icon png files. What am I missing?
0
Hi Shoji,
The styling of the this pop-up is part of the kendo.mobile.all.min.css file. Make sure that you have it included in your project. Furthermore, please download the latest internal build of Kendo UI - 2013.1.703, by clicking on Manage Products while logged in on the website. I would also suggest to use a newer version of jQuery, as I can see you are using 1.7.1 in your project.
For your convenience here is a jsBin example which demonstrates a the loading pop-up window.
Regards,
Kiril Nikolov
Telerik
The styling of the this pop-up is part of the kendo.mobile.all.min.css file. Make sure that you have it included in your project. Furthermore, please download the latest internal build of Kendo UI - 2013.1.703, by clicking on Manage Products while logged in on the website. I would also suggest to use a newer version of jQuery, as I can see you are using 1.7.1 in your project.
For your convenience here is a jsBin example which demonstrates a the loading pop-up window.
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Shoji Kaburagi
Top achievements
Rank 1
answered on 10 Jul 2013, 06:48 PM
OK, I found the problem.
We use IISExpress for web server instead of Visual Studio Development server. As soon as I switch to IISExpress the animation stops showing and then when I switch back to VS server it shows fine.
We would like to use IISExpress for development if possible. Is there anyway?
Thanks,
Shoji
We use IISExpress for web server instead of Visual Studio Development server. As soon as I switch to IISExpress the animation stops showing and then when I switch back to VS server it shows fine.
We would like to use IISExpress for development if possible. Is there anyway?
Thanks,
Shoji
0
Hello Shoji,
You IIS server probably doesn't have the fonts used to display the loading pop-up. You need to make sure that you have the font files used on your IIS server as well. You can check how to configure the IIS on the following link:
http://docs.kendoui.com/getting-started/mobile/icons#configure-iis
I would also recommend to check out this stackoverflow thread, where you can find some useful information.
Regards,
Kiril Nikolov
Telerik
You IIS server probably doesn't have the fonts used to display the loading pop-up. You need to make sure that you have the font files used on your IIS server as well. You can check how to configure the IIS on the following link:
http://docs.kendoui.com/getting-started/mobile/icons#configure-iis
I would also recommend to check out this stackoverflow thread, where you can find some useful information.
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Shoji Kaburagi
Top achievements
Rank 1
answered on 13 Jul 2013, 01:25 PM
You are right. Adding the fonts below did the trick. Thanks for your help!
<staticContent>
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>
</system.webServer>
<staticContent>
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>
</system.webServer>
0
Hello Shoji,
I am glad it worked!
If you have any further questions, do not hesitate to contact us.
Regards,
Kiril Nikolov
Telerik
I am glad it worked!
If you have any further questions, do not hesitate to contact us.
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!