CODEWITHSUNDEEP
jquery-mobile
Kazekage Gaara
Kazekage Gaara

Reputation: 15052

Show loader while dynamic content is being populated in Jquery Mobile

I'm using the following snippet :

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
}

But it doesn't show the loader. And it also doesn't show the listview on the first load. If I go back and return again, only then is the content being shown.

Where am I going wrong?

Note : Using jquery Mobile 1.2.0

Upvotes: 1

Views: 664

Answers (1)

krishwader
krishwader

Reputation: 11381

Some issues you had with your code :

  • In your each method, you were refreshing your listview after every single row. Which isnt advised. I changed that to make each push the HTML into an array, which u could push into the listview. 

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

  • Removed all the live methods and converted it to on. live was removed in v1.9 and on replaced it. Even though you use an older version, it would do good to benefit from on.

  • Changed your pagebeforeshow event to pageshow. For some reason its not working on 1.2 the way it should. And added a pagehide method which will clear the HTML of ul so that it won't be seen the next time pageshow happens. 

    $(document).on({
 'pageshow': function (e) {
    populateDoctorList();
  },
  'pagehide': function () {
    $(this).find("ul").html("");
  }
}, "#doctorList");

  • Moved the loading show and hide methods to populateDoctorList. The context must be the same for the action you're currently doing and the loading methods. Else it wont work.

    function populateDoctorList() {
  $.mobile.showPageLoadingMsg("a", "Please wait", false);
  //rest if your code 
}

  • To hide the loading you must wait till the listview is ready to be used. Hence, added a promise() to the append and then called the hide of loading. promise ensures that everything is completed so applying the loading("hide") here makes sense.

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

  • a prototype - http://jsfiddle.net/hungerpain/kgWym/

Upvotes: 1

Related Questions