Jquery mobile 在Jquery Mobile中填充动态内容时显示加载程序_Jquery Mobile

Jquery mobile 在Jquery Mobile中填充动态内容时显示加载程序

jquery-mobile

Jquery mobile 在Jquery Mobile中填充动态内容时显示加载程序,jquery-mobile,Jquery Mobile,我正在使用以下代码段： function fetchContent() { //do something $.mobile.changePage("#toTheTargetPage"); } $("#toTheTargetPage").live('pagebeforeshow', function() { $.mobile.showPageLoadingMsg("a", "Please wait", false); renderTheContent()

我正在使用以下代码段：

function fetchContent()
{
    //do something
    $.mobile.changePage("#toTheTargetPage");
}

$("#toTheTargetPage").live('pagebeforeshow', function() {    
    $.mobile.showPageLoadingMsg("a", "Please wait", false); 
    renderTheContent();  
    $.mobile.hidePageLoadingMsg();
});

function renderTheContent()
{
    //populate dynamic list view using the content
}

但它没有显示加载程序。而且它也不会在第一次加载时显示listview。如果我返回并再次返回，只有在那时才会显示内容

我哪里做错了

注意：使用jquery Mobile 1.2.0时，您的代码出现了一些问题：

在

each

方法中，您在每一行之后刷新

listview

。这是不建议的。我改变了这一点，使

每个

将HTML推送到一个数组中，您可以将该数组推送到

列表视图中
var li = [];
$.each(doctors, function (obj, doctor) {
    //console.log(doctor.DoctorRating);
    ratingHtml = populateRatingDiv(doctor.DoctorRating);
    //console.log(obj);
    li.push("<li data-role='list-divider'>" + toTitleCase(doctor.DoctorName) + "<div class='ratings'>" + ratingHtml + "</div></li>" + "<li data-icon='false'><a data-doc=" + obj + " onclick='showDocDetails(this);'><img src='images/doctor.png' style='margin-top:5%'/><div><h3>" + doctor.DoctorSpecialisation + "</h3><p><strong>Phone : " + doctor.DoctorPhone + "</strong></p><p>" + doctor.DoctorAddress + "</p></div></a></li>");
});
$("#doctorListView").append(li);


将加载
显示和隐藏方法移动到populateDoctorList
。对于当前正在执行的操作和加载方法，上下文必须相同。否则就不行了
function populateDoctorList() {
  $.mobile.showPageLoadingMsg("a", "Please wait", false);
  //rest if your code 
}

要隐藏加载，必须等待listview准备好使用。因此，在

append

中添加了

promise（）

，然后调用隐藏加载

promise

确保一切都已完成，因此在此处应用

加载（“隐藏”）

是有意义的

$ul.append(li).promise().done(function () {
    $(this).attr("data-role", "listview").listview().listview("refresh");
    $.mobile.hidePageLoadingMsg();
});

原型-

您的代码存在一些问题：

在

each