Phonegap local DB does not display entered data

I am using phonegap and cordova (which was set up with android studio) and I am unable to get the results entered into the database to show.

I am getting the following Console.logs to show:

In device ready

| Tables created

|Records inserted into Team & Player

And I'm not really sure why the database is not displaying the results? in fact any alert()

or console.log()

inside a function showRecords() db.transaction(function(trans){

. I tried changing the code and changing the SQL statements, but I'm really not sure what the problem is.

I am using the Ripple chrome emulator to view the application | | Previous applications have worked using the database transaction function.

My main.js file

var db = null;


var createTblTeam = "CREATE TABLE IF NOT EXISTS tblTeam (fldTeamId INTEGER PRIMARY KEY, fldTeamName TEXT);";
var createTblPlayer = "CREATE TABLE IF NOT EXISTS tblPlayer (fldPlayerId INTEGER PRIMARY KEY, fldPlayerLastname TEXT, fldPlayerFirstname TEXT, fldDOB INTEGER, fldJumperNumber INTEGER, fldTeamID FOREIGN KEY);";

var insertTeam = "INSERT INTO tblTeam (fldTeamId, fldTeamName) VALUES (?,?);";
var insertPlayer = "INSERT INTO tblPlayer (fldPlayerId,fldPlayerLastname,fldPlayerFirstname ,fldDOB ,fldJumperNumber ,fldTeamID) VALUES (?,?,?,?,?,?);";



var showTeam = "SELECT * FROM tblTeam;";
var showPlayer = "SELECT * FROM tblPlayer;";


// var deleteAllRecsSQL = "DELETE FROM tblFooty;";
// var updateSQL = "UPDATE tblFooty SET fldFirstname = ?, fldLastname = ?, fldJumper = ? WHERE fldId = ?;";
// var deleteRecSQL = "DELETE FROM tblFooty WHERE fldId = ?;";
// var findRecordSQL = "SELECT * FROM tblFooty WHERE fldId = ?;";

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady()
{
  //alert("In deviceReady");
  console.log("In deviceReady");

  try
  {
    if( !window.openDatabase() )
    {
      alert("Databases on this device is not supported!");
    }
    else
    { 

      // this will open the database regardless of version
      var version = "";
      var displayName = "Footy Players";
      var maxSize = 1000;

      db = window.openDatabase("Team", version, "Team Details", maxSize);
      db = window.openDatabase("Player", version, "Player Details", maxSize);

      db.transaction(populateDB, onError, showRecords);
    }
  }
  catch(err)
  {
    if(err == 2)
      alert("Invalid database version");
    else
      alert("Unknown error: " + err);
  }
}

function populateDB(trans)
{
  db.transaction(function (trans){

    trans.executeSql(createTblTeam, []);
    //Insert Into TEAM DB
    trans.executeSql(insertTeam, [1,"Melbourne"]);

    trans.executeSql(createTblPlayer, []);
     //Insert Into Player DB
    trans.executeSql(insertPlayer, [1,"Smith","James" ,15051998 ,2]);

    console.log("Tables created");


    console.log("Records inserted into Team & Player");   

  });
}

function showRecords()
{
  db.transaction(function(trans){
    trans.executeSql(showTeam, [], function(trans, result){
      var str = "";
      alert(row['fldTeamId'] + " " + row['fldTeamName']);
      if(result.rows.length == 0)
      {
        str += "<em>There are no records to display!<em>";
      }
      else
      {
        str += "<table border='0' cellpadding='0' width='80%'>";

        for( var i = 0, row = null ; i < result.rows.length ; i++)
        {
          row = result.rows.item(i);

          //alert(row['fldId']);
          //str += "<tr><td>" + row['fldId'];

          str += "</td><td>" + row['fldTeamId'];
          str += "</td><td>" + row['fldTeamName'];
          alert('hi');
          str += "</td></tr>"
        }
        str += "</table>";
      }

      $("#results").html(str);

    });
  });
}
function onError(err)
{
  console.log(err.code);

  switch(err.code)
  {
    case 0  : console.log("Non database error: " + err.message);
          break;
    case 1  :   console.log("Some database error: " + err.message);
          break;
    case 2  :   console.log("Invalid database version: " + err.message);
          break;
    case 3  : console.log("Dataset too large to return from query: " + err.message);
          break
    case 4  :   console.log("Stoprage limit exceeded: " + err.message);
          break;
    case 5  : console.log("Lock contention error: " + err.message);
          break;
    case 6  : console.log("Constraint failure: " + err.message);
          break;
    default : console.log("Error: " + er.code + " "  + err.message);
  } 
}

      

        
        
        
      

    

Index.html (jQuery Mobile)

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview">
            <li><a onClick="showRecords();" href="#page1">List Players</a></li>
            <li><a href="#page2">Add Player</a></li>
            <li><a href="#page3">Search for player</a></li>
            <li><a href="#page4">Delete a player</a></li>
        </ul>       
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>


<div data-role="page" id="page1">
    <div data-role="header">
        <h1>List Players</h1>
    </div>
    <div data-role="content">   
        <p id="results"></p>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>