我们正在构建一个应用程序,通过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");
}
}
修改 它在浏览器中工作,但在设备上不起作用。
答案 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;
});