so I'm still learning JavaScript and am having an issue with something I am working on. When trying to enter something into two separate text inputs it will only default to the gotError function, nothing is being inserted into the Web SQL and then read back to the list.
The JavaScript:
function openDb() {
db = openDatabase('DName', '1', 'NameV', 2 * 1024 * 1024);
//(Database Name, Version, Display Name, Size )
db.transaction(function (tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS Logs (id unique, person TEXT, place TEXT)");
});
}
document.addEventListener('init', function(event) {
if(event.target.id == 'mylist') {
openDb();
storeItems();
}
});
function gotError() {
alert('Something went wrong.');
}
function gotSuccess() {
storeItems()
}
function storeItems()
{
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM Logs", [], listItems, gotError);
});
}
function listItems(rs)
{
var output = '';
var list = document.getElementById('tList');
for(i = 0; i < rs.rows.length; i++)
{
stuff = person && place;
var row = rs.rows.stuff(i);
output += "ons-list-item>" + row.stuff +
"<div class=\"right\"> <ons-button><ons-icon icon=\"trash\"></ons-icon></ons-button></div>" +
"</ons-list-item>";
}
list.innerHTML = output;
}
function addItem()
{
var textbox = document.getElementById("person", "place");
var value = textbox.value;
db.transaction(function(tx)
{
tx.executeSql("INSERT INTO Logs (person,place) VALUES (?,?)", [value], gotSuccess, gotError)
});
textbox.value = "";
fn.load("mylist.html");
}
The HTML:
<template id="mylist.html">
<ons-page id='mylist'>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
My List
</div>
</ons-toolbar>
<div>
<ons-input type="text" class="select-input--underbar" id="person" placeholder="Enter person here . . ."></ons-input>
<ons-input type="text" class="select-input--underbar" id="place" placeholder="Enter place here . . ."></ons-input>
<ons-button modifier="large" onclick="addItem()">Add Item</ons-button>
</div>
<ons-list id='tList'>
<ons-list-header>Listed Items:</ons-list-header>
<ons-list-item>
</ons-list-item>
</ons-list>
</ons-page>
</template>
</ons-page>
</template>
Originally the code was supposed to insert have two text inputs that would need to be filled out, a button would be pressed to add them to the list, then display the db contents for person and place. Then each time the page was opened or closed it would re-read the contents of the db and redisplay them on the list.