[英]How to retrieve a value from database on click event and display it in HTML5 using (jqtouch+database+jquery)
[英]How to retrieve value from database and display it in an html5 using (jqtouch+phonegap)
我正在尝试使用html5,javascript,jqtouch和phonegap制作用于移动健康的Iphone应用程序。 我正在做一个学校项目,以学习使用html5 jqtouch和phonegap构建iPhone应用程序。
我可以使用pName作为数据库表中的列创建数据库。 但是我无法在index.html中的空div(第一个名为PatientList的面板)中填充整个患者姓名列表。
我已经制作了一个名为index.html的文件。 该文件具有不同的面板。 第一个面板是PatientList面板。 第二个面板是在数据库中创建一个新条目。 在数据库中创建新条目后,第一个名为“患者列表”的面板将填充所有患者姓名。 我的代码成功创建了一个数据库,但在PatientList面板中未显示任何患者的名称(pName)。
我是第一次使用HTML5,CSS,JAVASCRIPT和JQTOUCH和PHONEGAP制作iphone应用程序。 我需要你的帮助。
我的index.html看起来像这样
<div id="patientList">
<div class="toolbar">
<h1>patientList</h1>
<a class="button slideup" href="#newEntry">+</a>
</div>
<ul class="edgetoedge">
<li id="entryTemplate" class="entry" style="display:none">
<span class="label">Label</span>
</li>
</ul>
</div>
<div id="newEntry">
<div class="toolbar">
<a class="button cancel" href="#">Cancel</a>
<h1>New Patient</h1>
<a class="button save" href="#">Save</a>
</div>
<br/>
<form method="post" >
<ul class="rounded">
<li><input type="text" placeholder="Patient Name"
name="PatientName" id="PatientName" autocapitalize="off"
autocorrect="off" autocomplete="off" /></li>
</ul>
<a class="button add" onclick="addNewMedicine()"style="size:12">+</a>
</ul>
<div id="empty" class="rounded">
</div>
<ul class="rounded">
<li><input type="submit" class="submit" name="action"
value="Save Entry" /></li>
</ul>
</form>
</div>
我的iphone.js看起来像这样
var jQT = new $.jQTouch({
});
var db;
$(document).ready(function(){
$('#newEntry form').submit(createEntry);
$('#patientList li a').click(function(){
var nameOffset = this.id;
sessionStorage.currentName = nameOffset; // storing the clicked patient name
refreshEntries();
});
// creating a database with name PatientDataBase and which has the table named patientRecord1
var shortName = 'patientDataBase';
var version = '1.0';
var displayName = 'patientDataBase';
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);
db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS patientRecord1 ' +
' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
' pName TEXT NOT NULL);'
);
}
);
});
// Function created a new enty in the database table patientRecord1
function createEntry() {
var pName = $('#PatientName').val();
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO patientRecord1 (pName) VALUES (?);',
[pName],
function(){
refreshEntries();
jQT.goBack();
},
errorHandler
);
}
);
return false;
}
// this function is used to retrive the data from the table and populate in the html pannel named patientList
function refreshEntries() {
$('#patientList ul li:gt(0)').remove();
db.transaction(
function(transaction) {
transaction.executeSql(
'SELECT * FROM patientRecord1;',
function (transaction, result) {
for (var i=0; i < result.rows.length; i++) {
var row = result.rows.item(i);
var newEntryRow = $('#entryTemplate').clone();
newEntryRow.removeAttr('id');
newEntryRow.removeAttr('style');
newEntryRow.data('entryId', row.id);
newEntryRow.appendTo('#patientList ul');
newEntryRow.find('.label').text(row.pName);
}
},
errorHandler
);
}
);
}
function errorHandler(transaction, error) {
alert('Oops. Error was '+error.message+' (Code '+error.code+')');
return true;
}
请告诉我我在哪里做错了。
将您的refreshEntries()函数替换为以下内容:
function refreshEntries() {
$('#patientList ul li:gt(0)').remove();
db.transaction(
function(transaction) {
transaction.executeSql('SELECT * FROM patientRecord1;', [], function(transaction, result) {
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows.item(i);
var newEntryRow = $('#entryTemplate').clone();
newEntryRow.removeAttr('id');
newEntryRow.removeAttr('style');
newEntryRow.data('entryId', row.id);
newEntryRow.appendTo('#patientList ul');
newEntryRow.find('.label').text(row.pName);
}
}, errorHandler);
});
}
您已经错过了executeSql
参数中的参数数组。 我把新代码放在这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.