I'm trying to expand on a tutorial where Jonathan Stark creates a database using JS, CSS, and JQuery.
Right now everything works fine if I have one "vehicle1" link and need to enter info for only that one link. If I add a second vehicle link, I get into problems. How do I adjust the code to allow me to enter and reveal code from a DB for multiple links? Here's a walk-through of what's going on:
This link takes me to code at "date" for vehicle 1:
<li><a href="#date">vehicle1</a></li>
it brings me to a new page where the data entered in will display. If it is the first time accessed, or the data has been deleted, then we see a blank page with buttons Back at upper left and New at upper right. If the data has been entered into the DB, then it will be filled in here. The fields are the same as in the form (which follows this listing):
<div id="date">
<div class="toolbar">
<h1>Saved Setups</h1>
<a class="button back" href="#">Back</a>
<a class="button slideup" href="#createEntry">New</a>
</div>
<li id="entryTemplate" class="entry" style="display:none">
<span class="newSetup">Setup Start</span><br>
FRONT Piston: <span class="piston"></span><br>
FRONT Shock Mounting, arm: <span class="shockMountingArm"></span><br>
FRONT Shock Oil: <span class="shockOil"></span><br>
FRONT Shock Springs: <span class="shockSpring"></span>
<span class="delete">Delete</span>
</li>
</ul>
</div>
Clicking on New will show a new page with the form to fill out and enter it into the DB. The previous listing has the same form field names as here. Now, vehicle 2 will have different field names than vehicle 1. Somehow these two forms will need to be duplicated and still work with the DB (or need a new DB for each vehicle).
<div id="createEntry">
<div class="toolbar">
<h1>New Setup</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul class="rounded">
<li><img src="picture.png">
<br>FRONT Shock Mounting, arm: <input type="text" placeholder="TAP HERE TO ENTER" name="shockMountingArm" id="shockMountingArm"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li>FRONT Piston: <input type="number" placeholder="" name="piston" id="piston"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li>FRONT Shock Oil wt.: <input type="number" placeholder="" name="shockOil" id="shockOil"
autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li>FRONT Shock Springs: <select name="shockSpring" id="shockSpring">
<option value="green">green</option>
<option value="blue">blue</option>
</select></li>
<li><input type="submit" class="submit" name="action" value="Save Settings" /></li>
</ul>
</form>
</div>
The above code works because of the code in kilo.js. Clicking the submit button on the form takes you to "createEntry." I tried added a $('#createEntry2 form').submit(createEntry); line for the vehicle2 link, but it did not work for vehicle 2; that is, it did not save the content entered into the form.
var db;
$(document).ready(function(){
$('#createEntry form').submit(createEntry);
$('#settings form').submit(saveSettings);
$('#settings').bind('pageAnimationStart', loadSettings);
var shortName = 'Kilo';
var version = '1.0';
var displayName = 'Setups';
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);
db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS entries ' +
' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
' date TEXT NULL, ' +
'
piston TEXT NULL, ' +
' shockSpring TEXT NULL, ' +
' shockMountingArm TEXT NULL, ' +
' shockOil TEXT NULL);'
);
}
);
});
******Here is the createEntry function. I tried adding the extra fields for vehicle2, but it doesn't work. Adding all the new fields needed for vehicle2 in the INSERT and SELECt clauses did not work either.
function createEntry() {
var date = sessionStorage.currentDate;
var shockOil = $('#shockOil').val();
var shockMountingArm = $('#shockMountingArm').val();
var piston = $('#piston').val();
var shockSpring = $('#shockSpring').val();
db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO entries (date, shockOil, shockMountingArm, shockSpring, piston) VALUES (?, ?, ?, ?, ?);',
[date, shockOil, shockMountingArm, shockSpring, piston],
function(){
refreshEntries();
jQT.goBack();
},
errorHandler
);
}
);
return false;
}
function refreshEntries() {
var currentDate = sessionStorage.currentDate;
$('#date h1').text(currentDate);
$('#date ul li:gt(0)').remove();
db.transaction(
function(transaction) {
transaction.executeSql(
'SELECT * FROM entries WHERE 1=1;',
[currentDate],
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('#date ul');
newEntryRow.find('.shockMountingArm').text(row.shockMountingArm);
newEntryRow.find('.shockOil').text(row.shockOil);
newEntryRow.find('.shockSpring').text(row.shockSpring);
newEntryRow.find('.piston').text(row.piston);
newEntryRow.find('.delete').click(function(){
var clickedEntry = $(this).parent();
var clickedEntryId = clickedEntry.data('entryId');
deleteEntryById(clickedEntryId);
clickedEntry.slideUp();
});
}
},
errorHandler
);
}
);
}
What do I need to to to add multiple vehicles so they don't conflict with one another? I tried duplicating the above into another file and renaming it Vehicle2.js, and referencing it at the top of the HTML page under the first kilo.js page, but that did not work either, even after prefacing many places as vehicle2 ("vehicle2shockOil," etc.) The error code for when I did this was No table called 'entries' and this alert appeared when submitting form info for vehicle 1 and 2.
Another error message I get is " number of '?'s in statement string does not match argument count (Code 1) "
Thanks for any insights or revealing questions you may have.
A complete explanation of the code can be found in chapters 4 and 5 here:
Thanks!