Issues with showLoading and AJAX WebService call

[Sean]

Hi All,

Have taken the AppBuilder demo and changed it around to access my own web services.  The layout is the same, as I am only doing a tech check on what I can and cannot do.  One part I am stuck on is that the showLoading doesn't trigger when it is called, but rather after my web service ajax call has run.  To frame this, I use this to call my jscript function (same as the appbuilder example)

                    <span id="login" data-role="touch" data-bind="events: { tap: login }">
                        <a data-role="button" class="btn btn-login">Login</a>
                    </span>

The login function is this (cutdown):

​                app.mobileApp.showLoading();
                MyWebservice.Field1 = myField1;
                MyWebservice.Field2 = myField2;
                MyWebservice.Connect();
                if (MyWebservice.getStatus())
                {
                    app.mobileApp.navigate("views/MyTest.html");   
                } else {
                  app.showAlert(strIncorrectLogin,"my App");
              }

The delay can occur in the MyWebservice.Connect, which is what gets the data back from the WebService.  But the showLoading does not appear, until the showAlert is used, then it sits behind the modal window.  The MyWebservice is defined in a separate javascript file, which is (cutdown):

    var MyWebservice= new function MyWebservice() {
        var blnSuccess = false;
        this.Field1= "blank";
        this.Field2= "blank";
        this.Connect = function (){
            $.ajax({
                url: constMyURL + "MyWebservice.asmx/MyFunction",
                data: JSON.stringify({myFamily: { Field1: this.Field1, Field2: this.Field2}}),
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                async: false,
                success: function (data) {
                    blnSuccess = data.d;
                },
                error: function (data) {
                    app.showAlert(strWebSerivceFailureMessage,"my Error");
                    blnSuccess = false;
                }
            });
        };
        this.getStatus = function (){
            return blnSuccess;
        };
    };

Any idea's on how to trigger this during the ajax web service call, incase there is a delay?  Also, is there a way to change the showLoading icon animation with something else?  Have found how to change the text, but would like to replace the animated gif with something else.

Thanks.
Cam.

[Sean]

Found the problem, and when you think about it, was sitting right in front of me.  For those that have the issue in the future.  Because I have separated my web service calls to another js file, most of my actions are done when the web service returns back.  However, because it isn't running async the showLoading only appears when the call comes back, not during.  Once async was set to true, and I moved the rest of my code to the Success or Failure, I now get the showLoading.

Still, anyone know how to change the default loading image?

[Kaloyan]

Hello Sean,

I am glad to see that you have resolved the issue by yourself.

Further, talking about our default loading animation, I assume you mean the one that comes from Kendo UI Mobile. Please, correct me if I am wrong.

If my above assumption is right, you should be able to change it with some CSS. Just overwrite the styles of the following elements:

<div class="km-loader km-widget">
<span class="km-loading km-spin"></span>
<span class="km-loading-left"></span>
<span class="km-loading-right"></span>
<h1>Loading...</h1>

I hope this helps.

Regards,
Kaloyan
Telerik