Jquery-Mobile：$.mobile.showPageLoadingMsg()不工作

Question

我是新的jquery手机版。我想使用jquery mobile.But的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

这可能是因为您在同一个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调用替换为您自己的代码。

这是full working jsFiddle sample

Answer 2

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

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

Answer 3

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

奇怪的是，它仍然不能为你工作，因为你应该仍然得到默认的页面加载文本，即‘加载’。您是否在其他地方将$.mobile.loadingMessage设置为false？

在任何情况下，我都是照本宣科，但我仍然不能让这个方法做我想做的事情。