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