我正在使用以下代码在 JQuery mobile 中显示加载消息。但加载中没有显示？我无法弄清楚这个问题。感谢您提前抽出时间。
$("#AccountListPage").live('pageinit', function (event) {
// alert('test');
$.mobile.showPageLoadingMsg();
listAccounts();
$.mobile.hidePageLoadingMsg();
//alert("Add Test");
});
删除评论后，警报可以正常工作。
listAccount函数
function listAccounts() {
var soapMessage =
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">\
<soap:Body>\
<ReadByOrgID xmlns="http://eyepax.crm.com/Organization">\
<OrganizationID>' + OrganizationID + '</OrganizationID>\
<ConfigurationCode>' + ConfigurationCode + '</ConfigurationCode>\
<Flag>' + Flag + '</Flag>\
<LicenceOrganizationID>' + LicenceOrganizationID + '</LicenceOrganizationID>\
</ReadByOrgID>\
</soap:Body>\
</soap:Envelope>';
soapMessage = $.trim(soapMessage);
//$.mobile.pageLoading(true);
$.mobile.showPageLoadingMsg();
$.ajax({
url: selectParentAccUrl,
type: "POST",
dataType: "xml",
data: soapMessage,
crossDomain: true,
success: endListAccounts,
error: function (jqXHR, textStatus, errorThrown) {
$.mobile.hidePageLoadingMsg();
alert("failure");
console.log(textStatus);
console.log(errorThrown);
},
contentType: "text/xml; charset=\"utf-8\""
});
return false;
}
function endListAccounts(xmlHttpRequest, status) {
var testsss;
console.log(xmlHttpRequest);
console.log(status);
console.log(Date());
//testsss = $(xmlHttpRequest).find("Table OrganizationName:eq(0)").text();
var result = $(xmlHttpRequest).find("OrganizationName").length
//result = 3;
var htmlString="";
for (i = 0; i < result; i++) {
htmlString = htmlString + "<li><a href='AccountDetails.html' onclick='AccountIndex="+i+"'>" + $(xmlHttpRequest).find("Table OrganizationName:eq(" + i + ")").text() + "</a></li>";
accountConstructor($(xmlHttpRequest).find("Table OrganizationID:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table ParentID:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table OrganizationName:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table IncorporationNo:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table POBoxAddress:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table PhysicalAddress:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table VisitSwithboard:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table VisitFax:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table www:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table Active:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table MotherCompany:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table AccountManager:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table AccountManagerID:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table VisitCountryID:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table CountryID:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table CategoryCount:eq(" + i + ")").text(),
$(xmlHttpRequest).find("Table ContactCount:eq(" + i + ")").text())
}
//alert(testsss);
console.log('orgID : ' + testsss);
console.log('count : ' + result);
var b = $(xmlHttpRequest).find('vstrError').text();
console.log('vsserr : ' + b);
//alert('vssr : ' + b);
$('#account_list').append(htmlString);
$("#account_list").listview("refresh");
console.log('account : ' + AccountArray[1].OrganizationName);
//$.mobile.hidePageLoadingMsg();
//$.mobile.pageLoading(true);
$.mobile.hidePageLoadingMsg();
// window.location = 'index.html';
//$.mobile.changePage('index.html');
}
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="assets/jquery.mobile-1.0.css" />
</head>
<body>
<div data-role="page" id="AccountListPage">
<div data-role="header">
<h1>CRM Mobile App</h1>
<a href="Account.html" data-icon="arrow-l">Back</a>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true" id='account_list'>
</ul>
</div><!-- /content -->
<div data-role="footer">
<small>© 2011 EyePax IT Consulting</small>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
最佳答案
我假设 listAccounts() 函数异步执行某些操作，例如 AJAX 请求或动画。
如果是这种情况，那么您需要将 $.mobile.hidePageLoadingMsg() 放入 listAccounts() 函数中异步代码的回调函数中。原因是 $.mobile.hideLoadingMsg() 紧随 $.mobile.showLoadingMsg() 函数运行，距离如此之近以至于可能永远不会被绘制。
以下是通过 AJAX 调用使用加载消息的示例
function listAccounts () {
$.mobile.showPageLoadingMsg();
$.ajax({
url : '<url>',
success : function () {
$.mobile.hidePageLoadingMsg();
}
});
}
$(document).delegate('#AccountListPage', 'pageinit', function () {
listAccounts();
});
利用全局 AJAX 事件发挥您的优势
您可以在 jQuery 中设置全局 AJAX 事件，以便每次发送 AJAX 请求时，都会显示加载消息(并在 AJAX 请求完成时删除):
function listAccounts () {
$.ajax({
url : '<url>'
});
}
$(document).delegate('#AccountListPage', 'pageinit', function () {
listAccounts();
}).ajaxStart(function () {
$.mobile.showPageLoadingMsg();
}).ajaxComplete(function () {
$.mobile.hidePageLoadingMsg();
});
使用带有动画的加载消息的示例
function listAccounts () {
$.mobile.showPageLoadingMsg();
$('#ani-element').stop().animate({
WebKitTransform : 'scale(3)'//this cales the `#ani-element` DOM element to three times it's size in webkit browsers
}, 500, function () {
$.mobile.hidePageLoadingMsg();
});
}
$(document).delegate('#AccountListPage', 'pageinit', function () {
listAccounts();
});
关于jquery - 在 JQuery Mobile 中加载消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9014515/