3

I have made a web app using jQuery Mobile, jQuery and html. It is basically an rss reader for its site. 

$(document).ready(function() {
$('[data-role=button]').click(function() {
    var $id = $(this).attr('id');
    switch($id)
    {
        case 'news-button':
        var type = 'news';
        var url = '/tag/news/';
        break;
        //etc...
    }
    $.get('http://wiiuandmii.com' + url + 'feed/', function(data) {
        $('#' + type + '-content').empty();
        var i = 0;
        $(data).find('item').each(function() {
            i = i + 1;
            $('#' + type + i).empty().remove();
            var $item = $(this);
            var html = '<li>';
            html += '<a href="#'+ type + i + '">';
            html += $item.find('image').text();
            html += '<h3 style="color: #01acca;">' + $item.find('title').text() + '</h3>';
            html += '<p>' + $item.find('pubDate').text() + '</p>';
            html += '</a>';
            html += '</li>';
            $('#' + type + '-content').append($(html));
            $('#' + type + '-content').find('img.attachment-thumbnail').removeClass().removeAttr('width').removeAttr('height');
            $('#' + type + '-content').listview('refresh');
            var page = '<div data-role="page" id="' + type + i + '" data-url="' + type + i + '">';
            page += '<div data-role="header" data-theme="c" data-position="fixed"><a href="#home" data-rel="back" data-theme="b" data-icon="arrow-l">Back</a><h1 style="margin-top:0px; margin-bottom:0px;"><img src="images/header.png" title="Wii U and Mii" alt="Wii U and Mii"/></h1></div>';
            page += '<div data-role="content" data-theme="c" class="main-' + type + i + '">';
            page += '<h1 style="color: #01acca;">' + $item.find('title').text() + '</h1>';
            page += '<p>' + $item.find('dc:creator').text() + '</p>';
            page += $item.find('desc').text();
            page += '</div>';
            page += '<div data-role="footer" data-theme="c"></div>';
            page += '</div>';
            $('body').append($(page));
            var test = '#' + type + i;
            $(test).page();
        });
    });
});
});

When the button on the home page is clicked it page transitions to the #news page just fine. The problem is, the content section of the #news page remains blank for about 5 seconds as the content is loading. The loading message does not appear. What should happen is the loading message should appear on the #home page whilst all the content is loaded up, and then transition to the #news page after it has been filled.

Am I triggering the loading of the content on the wrong event for the effect I want, if so which event should I be using?

EDIT on 30/9/2011

I have managed to get the page transition to wait until the list has been fully loaded before it transitions, however the loading message still does not appear.

I used:

$('#news').live('pagebeforeshow',function(event){
    $.mobile.showPageLoadingMsg();

instead of document ready and the .click

and I used:

$.ajax({
    url: 'http://wiiuandmii.com' + url + 'feed/',
    async: false,
    success:function(data){

instead of the .get()

nhahtdh
  • 55,989
  • 15
  • 126
  • 162
tblakey89
  • 656
  • 2
  • 9
  • 18
  • You are explicitly setting the loading message right? If so, can you provide your code for that? If not then you may need to do that in the click handler. – Dave Sep 27 '11 at 20:15
  • How are you loading the content? Are you doing some cleverness on your side to populate the news page? – Mike Robinson Sep 27 '11 at 20:39
  • Using .get(), i edited in the rest of the code, sorry i should have added it earlier – tblakey89 Sep 27 '11 at 22:47
  • I have tried with adding: $.mobile.pageLoading(true/false) at the beginning and end of the function, but it doesn't seem to work in this instance. – tblakey89 Sep 27 '11 at 22:55
  • I have same issue. Have you figured out the problem? – dev.e.loper Sep 30 '11 at 01:48
  • I will edit in my half solution, I have basically got the home page to wait till the list has been loaded up, however the loading animation still does not appear even after adding the show and hide loading functions. – tblakey89 Sep 30 '11 at 20:50

2 Answers2

3

Although there is already an accepted answer, I wanted to add that I had the very same issue and I solved moving the showPageLoadingMsg call from the pagebeforeshow to the pageshow handler. Hope this helps

Ale
  • 235
  • 2
  • 11
0

A member on the github-jQM forum suggested the following workaround that worked for me. Note, I am using jQM 1.0b1.

$('.ui-loader h1').text('my custom loading msg..');

Ref.: https://github.com/jquery/jquery-mobile/issues/1178

kannankeril
  • 28
  • 1