I am new to HTML 5 and using XDK for development. my app is supposed to take user input in form of game details, store them in a database then display them. Currently it isnt displaying anythng from the database.Kindly help, i have included my code
<!DOCTYPE HTML>
<html>
<head><Title>Game yangu</Title>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.1");
</script>
<script type="text/javascript">
var db=openDatabase('gameyangu','1.0','Holds data on games',100000);
var msg;
function insertScore(game_name,stadium,scores) {
db.transaction(function(tx) {
tx.executeSql('INSERT INTO LOGS (game_name,stadium,scores) VALUES (?, ?, ?, ?)', [game_name,stadium, scores]);
});
}
function renderResults(tx, rs) {
e = $('#league_games');
e.html("");
for(var i=0; i < rs.rows.length; i++) {
r = rs.rows.item(i);
e.html(e.html() + 'game_name: ' + r['game_name'] + ', stadium: ' + r['stadium'] + ', scores: ' + r['scores'] + '<br />');
}
}
function renderScores(stadium) {
db.transaction(function(tx) {
if (!(stadium === undefined)) {
tx.executeSql('SELECT * FROM LOGS WHERE stadium = ?', [stadium], renderResults);
} else {
tx.executeSql('SELECT * FROM stadium', [], renderResults);
}
});
}
$(document).ready(function() {
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS(game_name,stadium,scores)',[]);
});
document.querySelector('#game_scores').innerHTML=msg;
$('#score_form').submit(function() {
LOGS = { 1: $('#game_name').val(), 2: $('#stadium').val(),3:$('#scores').val()};
for (var game_name in LOGS) {
insertScore($('#game_name').val(),$('#stadium').val(),$('#scores').val);
}
renderScores();
return false;
});
$('#filter_previous_scores_form').submit(function() {
e = $('#filter_by_stadium').val();
renderScores(e);
return false;
});
renderScores();
});
</script>
</head>
<body>
<form method="get" id="score_form">
<div>
<label for="1">Game Name</label>
<input type="text" id="game_name" name="game_name" />
</div>
<div>
<label for="2">Stadium</label>
<input type="text"id="stadium" name="stadium" />
</div>
<div>
<input type="text" id="scores" placeholder="Enter game scores" size="40"/>
</div>
<div>
<input type="submit" value="Upload Score" />
</div>
</form>
<div>
<h2>Played Games</h2>
<form id="filter_previous_scores_form">
<input type="email" placeholder="Filter games by stadiums" size="40" id="filter_by_stadium" /><br />
<input type="submit" value="Filter" />
</form>
</div>
<div id="league_games"></div>
</body>
</html>