1

起初很抱歉,如果我有一些打字错误,英语不是我的主要语言,但我会尽我所能解释它。

我正在开发一个带有笔记数据库的测试应用程序。添加和删​​除它可以正常工作,但有一个小问题......目前我添加了一个注释(在edit.html上)并想要返回到 index.html 页面它不会返回。我正在处理多个数据页面角色页面,因此每个页面都有自己的 ID。我用于笔记数据库的代码:

index.html 标题:

$("#homePage").live('pageinit', function() {
init();
});

index.html 数据页角色

<div data-role="page" id="homePage" data-add-back-btn="true" class="noteclass">
<!-- HEader -->
<div data-role="header" >
    <h1>Notitie Database</h1>
</div>
<!-- Main content div -->
<div data-role="content" id="mainContent">
    <ul data-role="listview" id="noteTitleList"></ul><br />
</div>
<div data-role="content">
    <a href="edit.html" data-role="button" data-icon="plus">Voeg notitie toe</a>
</div>
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
    <p>&copy; 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>

Edit.html(在这里你可以添加/更改/删除注释)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div data-role="page" id="editPage">
<!-- HEader -->
<div data-role="header">
    <h1>Write Note</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#Delete').click(function() {
        DeleteNote($('#noteId').val());
    });

    $('#addNote').click(function() {
        var data = {title:$("#noteTitle").val(), 
                body:$("#noteBody").val(),
                id:$("#noteId").val()
        };
        saveNote(data);             
    });     
});
</script>
<div data-role="content">   
    <form id="editNoteForm" method="post">
        <input type="hidden" name="noteId" id="noteId" value="">
        <div data-role="fieldcontain">
            <label for="noteTitle">Title</label>
            <input type="text" name="noteTitle" id="noteTitle">
        </div>
        <div data-role="fieldcontain">
            <label for="noteBody">Note</label>
            <textarea name="noteBody" id="noteBody"></textarea>
        </div>
        <div data-role="fieldcontain">
            <button id="addNote">Opslaan</button>
        </div>
    </form>
    <button id="Delete">Verwijder</button>
</div>
<a href="index.html#homePage" data-role="button" data-icon="home">Ga terug</a>
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
    <p>&copy; 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
</body>
</html>

这是我用于笔记数据库的后端代码

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
phoneready();
}

function setupTable(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS notes(id INTEGER PRIMARY KEY,title,body,updated)");
}   

function getEntries() {
dbShell.transaction(function(tx)
{
    tx.executeSql("select id,title,body, updated from notes order by id asc", dbErrorHandler, renderEntries)
}, function(){ alert ("Error getentries"); 
});

}


function renderEntries(tx,results){
if (results.rows.length == 0) {
    $("#mainContent").html("<p>Je hebt nog geen notities.</p>");
} else {
   var s = "";
   for(var i=0; i<results.rows.length; i++) {
     s += "<li><a href='edit.html?id="+results.rows.item(i).id + "'>" + results.rows.item(i).title + "</a></li>";   
   }
   $("#noteTitleList").html(s);
   $("#noteTitleList").listview("refresh");
}
}

function saveNote(note) {

//Sometimes you may want to jot down something quickly....
if(note.title == "") note.title = "[Geen Titel]";
dbShell.transaction(function(tx) {
    if(note.id == "") 
    {
        tx.executeSql("insert into notes(title,body,updated) values(?,?,?)",[note.title,note.body, new Date()]);
    }
    else
    {
         tx.executeSql("update notes set title=?, body=?, updated=? where id=?",[note.title,note.body, new Date(), note.id]);
    }
}, function(){ alert ("Error savenote");}, 
    function()
    {
        window.navigator.location("index.html#homePage");
    });
}

function DeleteNote(id){
    dbShell.transaction(
    function(tx)
    {
        tx.executeSql('Delete FROM notes where id=' + id);
    },
        function(){ alert ("Error deletenote");},
    function(err)
    {
        window.navigator.location("index.html#homePage");
    });
}

function phoneready(){
dbShell = window.openDatabase("SimpleNotes", 2, "SimpleNotes", 1000000);
setupTable();   
}

function init(){
getEntries();

//edit page logic needs to know to get old record (possible)
$("#editPage").live("pagebeforeshow", function() {
    //get the location - it is a hash - got to be a better way
    var loc = window.location.hash;
    if(loc.indexOf("?") >= 0) {
        var qs = loc.substr(loc.indexOf("?")+1,loc.length);
        var noteId = qs.split("=")[1];
        //load the values
        dbShell.transaction(
            function(tx) {
                tx.executeSql("select id,title,body from notes where id=?",[noteId],function(tx,results) {
                    $("#noteId").val(results.rows.item(0).id);
                    $("#noteTitle").val(results.rows.item(0).title);
                    $("#noteBody").val(results.rows.item(0).body);
                });
            }, dbErrorHandler);

    }
});
}

正如您在 saveNote 和 deleteNote 上看到的那样,我调用函数 window.navigator.location("index.html#homePage"); 我尝试使用 $.mobile.changePage("index.html#homePage"); 它会返回,但不会运行 init(); 头脚本中的函数。我希望我解释的一切都是正确的,如果有任何问题,请告诉我。然后我会尽力解释它。

编辑:更多信息:

首先感谢您的回答,我得到了多个数据角色页面。

一个额外的例子:

<div data-role="page" id="page5" data-add-back-btn="true">
<!-- Header --> 
<div data-role="header" >
<h1>Locatie</h1>
</div>
<!-- Main content div -->
<div data-role="content">   
<p id="geolocation" onClick="onDeviceReady()">Op zoek naar uw locatie ...</p>
<img src="" id="map" width="100%" height="" />
<h4>Omgeving</h4>
<img src="" id="map2" width="100%" height="" />
</div>
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>&copy; 2012 -  Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
4

2 回答 2

1

您正在尝试使用深层链接 "index.html#homePage" 更改页面。JqueryMobile 不支持。当您传递一个文件时,他将只加载该文件的第一页。这意味着当您传递“index.html#homePage”时,他只会考虑“index.html”并加载该文件的第一页。

我不确定,但如果您的 index.html 文件中只有“主页”,请将函数 window.navigator.location 更改为:

$.mobile.changePage("index.html")

当然,对锚标签也做同样的事情。

于 2013-01-15T14:22:47.500 回答
0

我用:

window.location = "#home";

于 2013-01-15T16:27:40.130 回答