jQuery Mobile: Loading Message not appearing

Question

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

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
– Dave, Commented Sep 27, 2011 at 20:15
How are you loading the content? Are you doing some cleverness on your side to populate the news page? — Mike Robinson
– Mike Robinson, Commented Sep 27, 2011 at 20:39
Using .get(), i edited in the rest of the code, sorry i should have added it earlier — tblakey89
– tblakey89, Commented Sep 27, 2011 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
– tblakey89, Commented Sep 27, 2011 at 22:55

Ale · Accepted Answer · 2012-06-23 08:10:46Z

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

answered Jun 23, 2012 at 8:10

Ale

2352 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kannankeril · Accepted Answer · 2011-10-07 17:53:59Z

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

answered Oct 7, 2011 at 17:53

kannankeril

281 bronze badge

Collectives™ on Stack Overflow

jQuery Mobile: Loading Message not appearing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related