Jquery Mobile 1.2RC-1 loading message not showing

Question

I am trying to show the, JQM 1.2 RC-1, loading message during initial application / site init and every time a user returns to the #index page. My understanding of the way to do this would be as follows, however, it is not working as I expect. This does not show the loading message.

$('body').on('pagebeforeshow', '#index', function(){

    $.mobile.loading('show')

    $('#index ul li').remove()

    var post_data = {
        action: 'an_action',
        method: 'method'
    }

    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: post_data,
        cache: false,
        dataType: 'text',
        cache: false,
        success: function(response) {

            $('#index ul').append(response)

            $('#index ul').listview('refresh')

            $.mobile.loading('hide')

        },
        error: function(jqXHR, textStatus, errorThrown) {

            console.log( ' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown )

        }
    })  


})

The workaround I found on here(stackoverflow) works to show the loading message on load.

$('#index').live('pageshow', function(event) {   //Workaround to show page loading on initial page load

    $.mobile.loading('show')

})

The problem I am experiencing is when I navigate back to the #index and the loading message is sometimes removed and other times it remains.

If the loading message is active and I click a link to leave the current page, the loading message is removed as expected. When I return from the same link to the #index the loading message is sometimes removed without refreshing the page in browser.

Is there another method to achieve the loading message on initial application / site load?

Additional info:

Tested on iDevice running Safari iOS 6 and Chrome, Mac OSX Chrome, Safari, Firefox, Opera with same results.

jQuery Mobile 1.2 RC-1

I am using single page template and injecting server data into lists then transitioning to different page #id's.

I've tried with no success:

$('#index').live('pageinit', function(event) {   

    $.mobile.loading('show')

})

The $.ajax() is successfully being triggered and completed as I can change server data and it is consistently changed within the application.

This is confusing since the $.mobile.loading('hide') should also be triggered and hide the loading message since the response is successful. This leads me to believe it is not a caching issue.

Answer 1

This is what I did, I added a div to my content with class="my_style" which is initially hidden and when the showpageloading message is displayed, these are the two custom functions to display it and hide it:

function showCustomPageLoadingMsg(){
    $('.my_style').css('display','inline');
}

function hideCustomPageLoadingMsg(){
    $('.my_style').css('display','none');
}

and this is how I called the functions:$.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); and $.mobile.hideCustomPageLoadingMsg();

Another difference between my code and yours is that I put the ajax call and the called that function inside .live:

function test(){
     $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true);

$('#index ul li').remove()

var post_data = {
    action: 'an_action',
    method: 'method'
  }

$.ajax({
    type: 'POST',
    url: ajaxurl,
    data: post_data,
    cache: false,
    dataType: 'text',
    cache: false,
    success: function(response) {
        $.mobile.hideCustomPageLoadingMsg();
        $('#index ul').append(response)

        $('#index ul').listview('refresh')



      },
    error: function(jqXHR, textStatus, errorThrown) {

        console.log( ' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown )

      }
  })  

}

$('#index').live('pageinit', function(event) {   

test();

});

Loop holes in your code:

1. A lot of code is missing a semicolon at the end of the line of code ; This is a standard delimiter
2. You are hiding your message after you have appended the html content in your success function. This should be done before.
3. Lastly try to employ functional programming so that you can re-use the code in different scenarios and in the long run if you have to change the code you will perform the changes only in one place.
4. Another thing is, with functional programming, you can introduce variables that test() can take and substitute them in the definition of test.

Happy hacking!!!