Jquery-Mobile: $.mobile.showPageLoadingMsg() is not working

Question

I am new jquery mobile. i want to use showPageLoadingMsg() of jquery mobile.But it is not working. Following is my code please can anybody help me.

code

< !DOCTYPE html>   
< html> 
< head> 
    < meta charset="utf-8"> 
    < meta name="viewport" content="width=device-width, initial-scale=1"> 
    < title>Single page template</title>
    < link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    < script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    < script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
< /head> 
< body>
< !-- BMR Screen page -->

  < div data-role="page" id="BMR_screen">

  < div data-role="header" data-theme="e" id="hdrBMRScreen">

  < h1> BMR Screen< /h1>
  < /div>

  < div data-role="content" id="contentBMRScreen"> 

        < div data-role="fieldcontain">  

             < label for="BMR_age">Age(in years):</label> 

             < input type="text" id="BMR_age" /> 

        < /div> 

        < a href="#BMR_Result" onclick="BMR_Cal()"  data-role="button">submit</a> 

  < /div>

 < /div>

 < !-- End BMR Screen -->

   < div data-role="page" id="BMR_Result">

       < div data-role="header" data-theme="b" >

            < a data-role="button" data-rel="back" data-icon="back">back</a>

            <h1>BMR Result</h1> 

       < /div>

        < div data-role="content">      

          < p id="W_Range">Weight Range:</p>   

        < /div>
    < /div>

  < script type="text/javascript"> 

  var agevar;


  $(document).ready(function () {   
    // Initialize variables 
    ageVar = $('#BMR_age');     
  });

  function BMR_Cal()

 {    
    $.mobile.loadingMessage = "please wait...";     
    $.mobile.showPageLoadingMsg();

    if(ageVar.val() > 0)
    {       
        some code is there
        .............

        $.mobile.changePage( $("#BMR_Result"), { transition: "flip"} );       
    }

    $.mobile.hidePageLoadingMsg();

  }
  < /script>
  < /body> 
< /html>

thanks

Answer 1

我没有尝试过，但似乎你应该阻止锚点/按钮的默认动作（即自动跳转到#BMR_Result）。

<a href="#BMR_Result" onclick="BMR_Cal(); return false;" data-role="button">submit</a>

Answer 2

That's probably because you are calling both inside the same js method, so the browser doesn't have time to update it's UI...

UPDATE: seems there were some more changes needed. Here's my simplified working version of your function:

function BMR_Cal(){
    $.mobile.loadingMessage = "please wait...";
    var ageVar = $('#BMR_age');

    if (ageVar.val() > 0) {
        $.mobile.showPageLoadingMsg();
        $.ajax({
            url:"http://wwww.google.com",
            complete: function(){
                $.mobile.changePage($("#BMR_Result"), {transition: "flip"});
            }
        });
    }
    return false;
}

Of course you'll have to replace the .ajax call to your own code.

Here's the full working jsFiddle sample

Answer 3

The $.mobile.loadingMessage = "please wait..." setting needs to be defined in the mobileinit event handler. And that handler needs to be bound exactly after you've loaded jQuery, but before you've loaded jQueryMobile.

It's still strange that it's not working for you though, as you should still be getting the default page loading text, ie 'loading'. Have you set $.mobile.loadingMessage to false somewhere else?

In any case, I'm doing everything by the book and I still can't get this method to do what I want.