1

我正在使用新的 cordova.js、jquery mobile 和我自己的 custom.js 构建一个 phonegap 应用程序

在主页上 index.html 是一个最初为空白的值列表

当您单击 index.html 页面上的设置链接时，您将进入 secondpage.html，您可以在其中输入一些值。当您单击 secondpage.html 上的提交按钮时，我会在 custom.js 中调用一个名为 updatevalues() 的函数，用于更新 index.html 上列表中的值。这不会发生。帮我理解为什么？这是 index.html、secondpage.html 和 custom.js 文件

---------------- index.html

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.1.0.css" />
<script type="text/javascript" src="jquery/custom.js"></script> 
<script type="text/javascript" src="jquery/jquery_1_7_2.js"></script> 
<script type="text/javascript" src="jquery/jquery.mobile-1.1.0.js"></script> 

</head>
<body>
<div data-role="page" id="mainpage"> 
          <div data-role="header" id="hdrMain"> 
               <h1>mainpage</h1>
          </div>

          <div data-role="content" id="contentMain"> 
               <p> Main Menu</p>
               <ul data-role="listview" data-inset="true" data-theme="b" >
                    <li><a href="secondpage.html">Setup</a></li>
                </ul>
          </div>

          <div data-role="content" id="contentInfo"> 
               <p>
          <ul data-role="listview" data-theme="g" id="contentlist">
               <li></li>
               <li></li>
          </ul>
     <p>
          </div>

         <script type="text/javascript" >  
          $( document ).delegate("#mainpage", "pageinit", function() {
              alert('A page with an ID of "mainpage" is about to be created by jQuery Mobile!');
              updatevalues();
            });
    </script>  
     </div>
</body>
</html>

---------------------- secondpage.html

<!DOCTYPE HTML>
<html>
<head>
<title>Setup</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>

<link rel="stylesheet" type="text/css"
    href="jquery/jquery.mobile-1.1.0.css" />
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
         <script type="text/javascript" src="jquery/custom.js"></script> 
<script type="text/javascript" src="jquery/jquery.mobile-1.1.0.js"></script>
</head>

<body>
<div data-role="page">
<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">
        <h1> Setup</h1>
    </div>
    <div class="maindivs"  data-role="content" id="contentMain" name="contentMain"> 
    <form id="main" name="main">
<p>Your Starting Profile</p>
<p>* = REQUIRED</p>

<div class="maindivs"  id="ageDiv" data-role="fieldcontain">
<label for="yourage">Enter Your Age *</label> 
<input id="yourage" name="yourage" type="number" />
</div>

<div class="maindivs"  id="weighttDiv" data-role="fieldcontain">
<label for="startingweight">Weight in lbs *</label> 
<input id="startingweight" name="startingweight" type="number" />
</div>

<div class="maindivs"  id="submitDiv" data-role="fieldcontain">   
<a href="#" data-role="button" onClick=profilebuttonformbutton()> Submit </a> 
    </div>
   </form>
</div> 

<div class="requireddivs"  id="requiredDiv" data-role="fieldcontain">
Please fill in all required fields
<a href="#" data-role="button" onClick=showmainpagebutton()> OK </a> 
</div>

<div class="updateddivs"  id="updateDiv" data-role="fieldcontain">
Your values have been set.<br></br>
<a href="#" data-role="button" onClick=showindexpagebutton()> OK </a> 
</div>

<script>
    $(document).ready(function() {
    // Assign global variables
      //hdrMainVar = $('#hdrMain');
        $('.maindivs').show();
        $('.requireddivs').hide();
        $('.updateddivs').hide();
    }); 
    </script>

</div>
</body>
</html>

----------------------------------------- custom.js

function updatevalues() 
{
    alert("checkvalues");
    var yourageVar = window.localStorage.getItem("yourageLocal");
    var weightVar = window.localStorage.getItem("weightLocal");
    alert("yourageVar = " + yourageVar);
    alert("weightVar = " + weightVar);

    if (!yourageVar || !weightVar)
    {
        $("#contentlist").empty(); //empty the list elements we've placed in the html
        //repopulate the list with data from phonegap's device api
        $("#contentlist").append("<li>Your age: 0</li>");
        $("#contentlist").append("<li>Your weight: 0</li>");
        $("#contentlist").listview('refresh'); //must be called if you want the new list elements properly styled
    }
    else
    {
        alert("main");
        alert("your age = " + yourageVar);
        alert("your weight = " + weightVar);
        $("#contentlist").empty(); //empty the list elements we've placed in the html

        //repopulate the list with data from phonegap's device api
        $("#contentlist").append("<li>Your Age: " + yourageVar + "</li>");
        $("#contentlist").append("<li>Your Weight: " + weightVar + "</li>");
        $("#contentlist").listview('refresh'); //must be called if you want the new list elements properly styled
    }
    $("#contentlist").listview('refresh'); //must be called if you want the new list elements properly styled
}

function showmainpagebutton( event ) 
{
    $('.maindivs').show();
    $('.requireddivs').hide();
    $('.updateddivs').hide();
}

function showindexpagebutton( event ) 
{
    $.mobile.changePage( "index.html", { transition: "slideup"} );  
}
4

1 回答 1

0

尝试这个：

//empty the list elements we've placed in the html
$("#contentlist li").remove();

//repopulate the list with data from phonegap's device api
$("#contentlist").append($("<li>Your Age: " + yourageVar + "</li>"));
$("#contentlist").append($("<li>Your Weight: " + weightVar + "</li>"));
$("#contentlist").trigger('create');
$("#contentlist").listview('refresh');
于 2012-05-16T00:32:29.893 回答