Hallo,
Ik heb een kleine vraag over phonegap.
Ik heb op het moment een opdracht voor school om een applicatie te maken voor een android telefoon.
Tot nu toe gaat het aardig goed maar ik heb toch een kleine probleem.
Ik heb een soort van notitie database (Waar mensen notities kunnen toevoegen)
Het werkt goed met toeveogen/updaten/verwijderen, tot op een bepaald moment....
Op het moment dat ik een notitie toevoeg doet hij het gewoon, hij gaat dan terug naar de notitie pagina alleen hij "vernieuwd" hem dan niet.
Dan moet ik echt de applicatie afsluiten en opnieuw openen om de nieuwe toegevoegde notitie te bekijken.
Ik heb de code toegevoegd die van toepassing zijn op de notitie database.
index.html
Header
Index.html -> Data-role page
Edit.html
Hier kun je opslaan/wijzigen/verwijderen.
App.js
Alle achterliggende code voor de database
Ik heb al wat dingen geprobeerd maar kom er niet uit. Ben niet echt zo bekend met jquery/phonegap/javascript coderen en vind dat ik al behoorlijk me best heb gedaan (Natuurlijk met een voorbeeld van het internet anders kwam ik er echt niet uit)
Hopelijk kan iemand mij hier helpen met het probleem, want ik kan de fout maar niet vinden.
Alvast bedankt voor het lezen en op een mogelijke reactie :thumb:
Ik heb een kleine vraag over phonegap.
Ik heb op het moment een opdracht voor school om een applicatie te maken voor een android telefoon.
Tot nu toe gaat het aardig goed maar ik heb toch een kleine probleem.
Ik heb een soort van notitie database (Waar mensen notities kunnen toevoegen)
Het werkt goed met toeveogen/updaten/verwijderen, tot op een bepaald moment....
Op het moment dat ik een notitie toevoeg doet hij het gewoon, hij gaat dan terug naar de notitie pagina alleen hij "vernieuwd" hem dan niet.
Dan moet ik echt de applicatie afsluiten en opnieuw openen om de nieuwe toegevoegde notitie te bekijken.
Ik heb de code toegevoegd die van toepassing zijn op de notitie database.
index.html
Header
Code:
<script src="jquery-mobile/jquery-1.8.3.min.js"></script>
<script>
$(document).delegate('#homePage', 'pagebeforeshow', function() {
init();
});
</script>
<script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>Index.html -> Data-role page
Code:
<!-- Page 6 (Notitie Database -->
<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">Add Note</a>
</div>
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
<!-- End page 6 -->Hier kun je opslaan/wijzigen/verwijderen.
Code:
<!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() {
alert($('#noteId').val());
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" data-role="button" data-icon="home">Ga terug</a>
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
</body>
</html>App.js
Alle achterliggende code voor de database
Code:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
phoneready();
}
//I just create our initial table - all one of em
function setupTable(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS notes(id INTEGER PRIMARY KEY,title,body,updated)");
}
//I handle getting entries from the db
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(err)
{
$.mobile.changePage("index.html#homePage")
});
}
function DeleteNote(id){
dbShell.transaction(
function(tx)
{
tx.executeSql('Delete FROM notes where id=' + id);
},
function(){ alert ("Error deletenote");},
function(err)
{
$.mobile.changePage("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);
}
});
}Hopelijk kan iemand mij hier helpen met het probleem, want ik kan de fout maar niet vinden.
Alvast bedankt voor het lezen en op een mogelijke reactie :thumb:
