2012-05-16 60 views
1

叫我使用的是新cordova.js,jQuery Mobile的和我自己的custom.js如何使用jQuery Mobile的更新從功能的index.html從secondpage.html

在主頁上建立的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"}); 
} 

回答

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');