Question

我们正在构建一个应用程序，通过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");
    }
}

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

Answer 1

改变这个：

<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>

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/

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

1 个答案: