mobile.loading需要很长时间才能显示出来

时间:2016-04-07 17:43:39

标签: javascript ajax jquery-mobile telerik loader

我们正在构建一个应用程序,通过ajax POST和GET进行一些外部调用,在这些调用期间,我们尝试显示mobile.loading。我们在“pagebeforecreate”内部从一个页面调用到另一个页面的加载器显示正常,如下所示:

$(document).on('pagebeforecreate', "#menu-principal", function(){     
setTimeout(function(){
    $.mobile.loading('show',
        {
            text: "Loading...",
            textVisible: true,
            theme: "b",
            textonly: true
        }
    );
},1);    

});

每当我们需要在按钮点击后显示加载程序时,加载程序需要很长时间才能显示,并且它失去了显示它的所有感觉,因此用户知道他必须等待。

按钮单击调用一个进行POST的JS函数,根据POST的结果,它可能会转换到另一个页面或显示警报。当需要显示警报时,加载程序仅在警报的同一时刻出现,一旦用户单击按钮并在警报之前隐藏,它就会出现。

带按钮的HTML

<div class="ui-field-contain">
  <span class="label">Matrícula com o dígito ou o CPF/CNPJ:</span>
  <input type="number" id="login_matricula" data-clear-btn="true">
</div>
<div class="ui-field-contain">
  <span class="label">Senha <small><a href="javascript:transitionPage('duvidas_senha.html', 'slideup', false, true)">Dúvidas sobre sua senha?</a></small></span>
  <input type="tel" id="login_senha" name="login_senha" style=" -webkit-text-security: disc;" data-clear-btn="true">
</div>
<div class="ui-field-contain">
    <a href="javascript:getLoginResult();"><button id="btn_envia_login" class="botao">Enviar</button></a>
</div>

<div class="banner">
    <div class="slider" id="sliderHome" role="toolbar"></div>
</div> 

JS使用函数getLoginResult()

function getLoginResult(){
    setTimeout(function(){
        $.mobile.loading('show',
            {
                text: "Loading...",
                textVisible: true,
                theme: "b",
                textonly: true
            }
        );
    },0); 

    var url = "/mobile/service/logon";
    var matricula = $('#login_matricula').val();
    var senha = $('#login_senha').val();

    var data = {
        'username':matricula,
        'password':senha
    };

    var retorno = sendPostRequest(url, data);

    if(retorno['responseJSON']['status'] === true){
        var dadosAssociado = getDadosAssociado();
        localStorage.setItem("dadosAssociado", JSON.stringify(dadosAssociado));

        if(retorno['responseJSON']['aviso'] != null){
            // removes loading
            setTimeout(function(){         $.mobile.loading('hide');     },100);

            alert("Shows alert");
        }else{ 

        }
    }else{
        // removes loading
        setTimeout(function(){         $.mobile.loading('hide');     },100);
        alert("Fail to login");
    }
}

修改 它在浏览器中工作,但在设备上不起作用。

1 个答案:

答案 0 :(得分:0)

改变这个:

<a href="javascript:getLoginResult();"><button id="btn_envia_login" class="botao">Enviar</button></a>

到此:

<button id="btn_envia_login" class="botao">Enviar</button>

并将您的javascript代码绑定到按钮点击事件:

$(document).on("click", "#btn_envia_login", function(){

    setTimeout(function(){
        $.mobile.loading('show',
            {
                text: "Loading...",
                textVisible: true,
                theme: "b",
                textonly: true
            }
        );
    },1);

    //etc

小提琴:https://jsfiddle.net/1vmjc4bm/

修改

更好的是,将HTML代码放在表单中,并将您的javascript代码绑定到表单提交事件,如下所示:

HTML:

<form data-ajax="false" id="btn_envia_login">
    <!-- form content goes here -->
</form>

jQuery的:

//Submit form
$(document).on("submit", "#btn_envia_login", function(e){
    //Prevent default action 
    e.preventDefault();

    //Display loader
    setTimeout(function(){
        $.mobile.loading('show',
            {
                text: "Loading...",
                textVisible: true,
                theme: "b",
                textonly: true
            }
        );
    },1); 

    //further handling
    //...
    //...
    //...

    //End with return false;
    return false;
});

更新了小提琴:https://jsfiddle.net/1vmjc4bm/1/