jQuery Mobile - pageLoading nor progress msg work

Hello kind people of the internet, There are several other postings related to this, but alas, none have yet resolved my bug...and I can't seem to noodle through just what I'm must be doing wrong.

Here's my test web page (which is a simple mortgage calculator test app):

[http://www.simdock.com/TestJQueryMobile-loadmsg-progress.htm]

I'd like to show a page loading msg, or a progress msg, what ever, as the next page is being rendered when going to page one or page two (or whatever page)...as I'm outputting a long payment schedule list, or whatever list...it takes a bit to generate...so need a page loading and/or progress msg that actually works.

As you transition from the main-menu calculator page, to page one or page two, there should be some sort of a page loading msg come up, but alas, all I can get to work is the alert msg to fire from the event.

I've tried a couple of ways to get a page load msg:

First way was suggested in the following stackoverflow link:

[http://stackoverflow.com/questions/6085679/jquery-mobile-pageloading-method-how-does-it-work][1]

The script snippet that pulls up my page one is as follows (which I attempted to emulate from the other postings on this subject):

<script type="text/javascript"> 
$('#one').live('pagebeforeshow',function(event, ui){
//PAGE ID "one" SELECTED EVENT
alert('Just selected page one!');
$.mobile.pageLoading(); 
$.mobile.loadingMessage = "calculating payment schedule...";
$.mobile.showPageLoadingMsg();
calcMonthlySchedule();
$.mobile.hidePageLoadingMsg();
});
</script>

The above simply doesn't work however...the alert fires, but nothing else happens, and there are no error msgs, etc...

The other way I've tried was from Jonathan Starks 开发者_StackOverflowbook, Building Android Apps with HTML, CCS and JavaScript (nice book!...but a bit pricey).

 <script type="text/javascript">
 $('#two').live('pagebeforeshow',function(event){
  //PAGE ID "two" SELECTED EVENT
  alert('Just selected page two!');
  $('body').append('<div id="progress">Loading...</div>');
  calcLongList();
  $('#progress').remove();
  });
 </script>

The above also doesn't seem to do anything (except fire the alert msg), as no div section is popped up (like it is in the book sample).

Sooooo...in any event, I must not be thinking/doing something or other...but not sure what...any help would sure be appreciated.

thanks in advance

I use $.mobile.pageLoading(); to show the loading graphics and $.mobile.pageLoading(true); to stop it.

For messages, there's the $.mobile.showPageLoadingMsg() method.

I've created a sample to prove it works. Just for you, Woody: http://jsfiddle.net/a6337/

This method doesn't work on pagecreate event, but works on pageshow:

$('#mypageone').live('pageshow',function(event){
  $.mobile.loadingMessage = "calculating payment schedule..."; 
  $.mobile.pageLoading(); 
  $.mobile.showPageLoadingMsg();
  calcLongList();
  //$.mobile.hidePageLoadingMsg();
});

try it out: http://jsfiddle.net/7fxQf/21/