我有一个像这样的2 div的页面
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deadlines</title>
<link rel="stylesheet" href="css/jqm-demos.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<script src="js/jquery.js"></script>
<script src="js/deadlines.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/deadlinesDB.js"></script>
<script>
window.onload = function () {
if (!window.device){
onDeviceReady();
}
}
</script>
</head>
<body>
<div id="deadlineList" data-role="page" class="jqm-demos" data-quicklinks="true">
<!-- header -->
<div data-role="header" class="jqm-header" data-position="fixed" data-tap-toggle="false" data-transition="none">
<h2>Deadlines</h2>
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
<a href="addNewDeadline.html" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-icon-plus ui-btn-right">Add new</a>
</div>
<!-- /header -->
<div data-role="content" class="ui-content jqm-content" >
<div data-demo-html="true">
<div data-role="tabs" id="tabs">
<!-- tab bar -->
<div data-role="navbar">
<ul>
<li><a href="#all" data-ajax="false">All</a></li>
<li><a href="#homework" data-ajax="false">Homework</a></li>
<li><a href="#test" data-ajax="false">Test</a></li>
</ul>
</div>
<!-- tab bar -->
<!-- tab content -->
<div id="all" class="ui-body-d ui-content">
<ul id="allList" data-role="listview" data-inset="true">
<!--List will go here-->
</ul>
</div>
<div id="homework" class="ui-body-d ui-content">
<ul id="homeworkList" data-role="listview" data-inset="true">
<!--List will go here-->
</ul>
</div>
<div id="test" class="ui-body-d ui-content">
<ul id="testList" data-role="listview" data-inset="true">
<!--List will go here-->
</ul>
</div>
<!-- tab content -->
</div>
</div>
</div>
</div>
<div id="DeadlineDetail" data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header" class="jqm-header" data-position="fixed" data-tap-toggle="false" data-transition="none">
<h2>Deadline Detail</h2>
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
<button onClick="getFormInfo()" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-icon-check ui-btn-right">Save</button>
</div>
<!-- end head -->
<div data-role="content" id="contentAddNewDeadline" class="ui-content" data-iscroll>
<form id="formDeadlineInfo">
<label for="shortDescription">Short Description</label>
<input id="shortDescription" type="text">
<br>
<label for="class">Class</label>
<select id="class" class="ui-selectmenu" >
</select>
<br>
<label for="dueDate">Due Date</label>
<input id="dueDate" type="date">
<br>
<label for="dueTime">Due Time</label>
<input id="dueTime" type="time">
<br>
<label for="type">Type</label>
<select id="type">
<option value="Homework">Homework</option>
<option value="Test">Test</option>
</select>
<br>
<label for="additionalInfo">Additional Info</label>
<input id="additionalInfo" type="text">
<br>
<label for="finished">Finished</label>
<select data-role="flipswitch" id="finished" class="ui-selectmenu" >
<option value="no" selected>no</option>
<option value="yes">yes</option>
</select>
</form>
</div>
<div data-role="footer" class="jqm-footer ui-footer-fixed" data-position="fixed" data-tap-toggle="false" data-transition="none">
<button onClick="deleteDeadline()" class="ui-btn ui-btn-icon-notext ui-corner-all ui-nodisc-icon ui-alt-icon ui-icon-delete ui-btn-b ui-btn-icon-bottom">Delete</button>
</div>
<!-- end tab content -->
</div>
</body>
deadlineDB.js代码
var id = "";
var db = null;
function onDeviceReady() {
db = window.openDatabase("HomeworkTracker3", "2.0", "HomeworkTracker3", 2000);
db.transaction(populateDB, errorCB, successCB);
db.transaction(getDeadlines, errorCB);
}
function populateDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS deadlines (id varchar(10) primary key, description varchar(500), class varchar(50), duedate date, duetime time, type varchar(50), additionalInfo varchar(200), finished varchar(10))');
}
//to get parameters from URL
GET = (function () {
var get = {
push:function (key,value){
var cur = this[key];
if (cur.isArray){
this[key].push(value);
}else {
this[key] = [];
this[key].push(cur);
this[key].push(value);
}
}
},
search = document.location.search,
decode = function (s,boo) {
var a = decodeURIComponent(s.split("+").join(" "));
return boo? a.replace(/\s+/g,''):a;
};
search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function (a,b,c) {
if (get[decode(b,true)]){
get.push(decode(b,true),decode(c));
}else {
get[decode(b,true)] = decode(c);
}
});
return get;
})();
function getDeadlines(tx){
//alert('get deadline');
var sql = "select * from deadlines where finished = 'no' ORDER BY duedate";
tx.executeSql(sql, [] , getAllDeadlines_success);
var sql2 = "select * from deadlines where finished = 'no' and type = 'Homework' ORDER BY duedate";
tx.executeSql(sql2, [] , getHomeworkDeadlines_success);
//alert('get test deadline');
var sql3 = "select * from deadlines where finished = 'no' and type = 'Test' ORDER BY duedate";
tx.executeSql(sql3, [] , getTestDeadlines_success);
}
function getAllDeadlines_success(tx, results){
var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
//id = allDeadline.id;
var allDeadline = results.rows.item(i);
var result = isLate(allDeadline.duedate, allDeadline.duetime).toString();
if ( result == "true"){
$('#allList').append('<li><a href="?id='+allDeadline.id+'#DeadlineDetail" data-transition = "slide" >'+ allDeadline.class +'<br>'+ allDeadline.duedate+' '+ allDeadline.duetime+'<br>'+ allDeadline.description +'</a></li>');
}
}
$("#allList").listview().listview('refresh');
////alert('before append');
}
function getHomeworkDeadlines_success(tx, results){
//alert('get homework deadlines');
var len = results.rows.length;
for (var i=0; i<len; i++){
var homeworkDeadline = results.rows.item(i);
var result = isLate(homeworkDeadline.duedate, homeworkDeadline.duetime).toString();
//alert('result: ' + result);
if ( result == "true" ){
//alert('prepend');
$('#homeworkList').append('<li><a href="?id='+homeworkDeadline.id+'#DeadlineDetail">'+ homeworkDeadline.class + '<br>' + homeworkDeadline.duedate+' '+ homeworkDeadline.duetime+'<br>'+ homeworkDeadline.description +'</a></li>');
}
}
$("#homeworkList").listview().listview('refresh');
////alert('before append');
}
function getTestDeadlines_success(tx, results){
var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
var testDeadline = results.rows.item(i);
var result = isLate(testDeadline.duedate, testDeadline.duetime).toString();
if ( result == "true"){
$('#testList').append('<li><a href="?id='+testDeadline.id+'#DeadlineDetail">'+ testDeadline.class + '<br>' + testDeadline.duedate+' '+ testDeadline.duetime+'<br>'+ testDeadline.description +'</a></li>');
}
}
$("#testList").listview().listview('refresh');
////alert('before append');
}
//Compare deadline time with current time
function isLate(deadlineDate, deadlineTime){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var parts = deadlineDate.split('-');
var time = deadlineTime.split(':');
if ( parts[0] < year ){// previous year
return false;
} else if ( ( parts[0] == year ) && ( parts[1] < month)){ // previous month
return false;
} else if (( parts[0] == year ) && ( parts[1] == month) && (parts[2] < date)){// previous date
return false;
} else if (( parts[0] == year ) && ( parts[1] == month) && (parts[2] == date) && (time[0] < hour)){ // previous hour
return false;
} else if (( parts[0] == year ) && ( parts[1] == month) && (parts[2] == date) && (time[0] == hour) && (time[1] < minute)) { // previous minute
return false;
} else {
return true;
}
}
function errorCB(tx, err) {
alert("Error processing SQL: "+err);
}
function successCB(tx){
}
function getDeadlineDetail(tx){
//////alert('get deadline detail');
id = GET.id;
//////alert(id);
var sql = "select * from deadlines where id = '" + id +"'";
tx.executeSql(sql, [] , getDeadlineDetail_success);
}
function getDeadlineDetail_success(tx, results){
var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
var deadline = results.rows.item(i);
var description = deadline.description;
var classDeadline = deadline.class;
var duedate = deadline.duedate;
var duetime = deadline.duetime;
var type = deadline.type;
var additionalInfo = deadline.additionalInfo;
var finished = deadline.finished;
document.getElementById("shortDescription").value = description;
document.getElementById("dueDate").value = duedate;
document.getElementById("dueTime").value = duetime;
document.getElementById("additionalInfo").value = additionalInfo;
var selectClass = $("#class");
$("#class").val(classDeadline);
selectClass.selectmenu("refresh");
var selectType = $("#type");
$("#type").val(type);
selectType.selectmenu("refresh");
var selectFinished = $("#finished");
$("#finished").val(finished);
selectFinished.flipswitch("refresh");
}
}
当我点击deadlineList div中的列表项时，它将使用id参数跳转到DeadlineDetail div。现在我想从参数中获取id以从db中检索信息，然后将其显示到DeadlineDetail div中。 如果我写这样的代码：
div id="DeadlineDetail" data-role="page" class="jqm-demos" data-quicklinks="true">
<script>
var id = GET.id;
//do something next to get deadline detail
</script>
<div data-role="header" class="jqm-header" data-position="fixed" data-tap-toggle="false" data-transition="none">
id会在页面加载时出现，这不是我想要的。我希望只有当用户点击列表项时才会获取id。那么在这种情况下我能做些什么呢？