Jquery-Mobile：$ .mobile.showPageLoadingMsg（）无效

Question

我是新的jquery手机。 我想使用jquery mobile的showPageLoadingMsg（）。但它无法正常工作。 以下是我的代码，请任何人帮助我。

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>

谢谢

Answer 1

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

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

Answer 2

这可能是因为你在同一个js方法中调用两个，所以浏览器没有时间更新它的UI ...

更新：似乎还需要进行一些更改。 这是我的函数的简化工作版本：

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;
}

当然，您必须将.ajax调用替换为您自己的代码。

这是完整的jsFiddle样本

Answer 3

需要在mobileinit事件处理程序中定义$ .mobile.loadingMessage =“please wait ...”设置。 在加载jQuery之后，但在加载jQueryMobile之前，该处理程序需要完全绑定。

它仍然很奇怪它不适合你，因为你仍然应该得到默认页面加载文本，即'loading'。 你有没有在其他地方将$ .mobile.loadingMessage设置为false？

无论如何，我正在按书完成所有事情，但我仍然无法通过这种方法来做我想做的事情。