HTML 5

HTML 5

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>

6 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Hi friend, It is over intel xdk game? or you run over other sdk?

JudLup Luna

I recommend that you look at the demos and templates in the XDK to get a feel for how to structure your application. You're not running inside a browser off a web site, so you have to structure your app differently. Use this template as a guide: https://github.com/gomobile/template-a-blank-cordova

How can I get a .gif to animate with HTML 5?

I used this function to put BE4.gif on the canvas but it doesn't animate and only shows the first frame of the .gif (it's an animated .gif, of course).

function func(){ var ImageCanvas=document.getElementById("canvas1");
if(!ImageCanvas.getContext){return;}
var context=ImageCanvas.getContext("2d");
var imgDraw=new Image();
imgDraw.onload=function(){context.drawImage(imgDraw,0,0);};
imgDraw.src="BE4.gif";
}

What can I do?

Online Printing www.printingperiod.com

its bit confusing

how conect database to intel xdk please help

 

Login to leave a comment.