Error retriving dtata from bb.pushScreen

aeshabana · ‎02-21-2013

Here is my index.html Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Hello World</title>
   

   <script src="scripts/webworks.js"></script>
   <!-- BBUI CODE -->
   <link rel="stylesheet" type="text/css" href="css/bbui.css" />
   <script type="text/javascript" src="scripts/bbui.js"></script>
   <script type="text/javascript">
		var webworksreadyFired = false;
			document.addEventListener('webworksready', function(e) {
				// This is code to ensure that if webworksready is fired multiple times we still only init() one time
				if (webworksreadyFired) return;
				webworksreadyFired = true;
				bb.init({
					  onbackkey: null,                   // Custom handler for back key on BlackBerry 5/6/7 smartphones
					  onscreenready: null,               // Manipulate your screen before it's inserted into the DOM
					  ondomready: null,                  // Manipulate your screen after it's inserted into the DOM
					  coloredTitleBar: false,            // If set to true, the title bar will be colored based on the highlight color
					  controlsDark: true,               // If set to true, the controls will use the dark theme
					  listsDark: false,                  // If set to true, lists will use the dark theme (you need a dark background)
					  highlightColor: '#00A8DF',         // A highlight color to use when a user selects an item
					  bb10ForPlayBook: true             // If set to true, PlayBook will be considered a BB10 device					  
				  });
			});
   </script>
   <!-- /BBUI CODE -->
   <script>
		function ready() {
			console.log('ready');
			blackberry.event.addEventListener('volumeupdate', onVolumeUpdate);
		};
		window.addEventListener("load", function(e) {
			document.addEventListener("webworksready", ready);
		}, false);
		function onVolumeUpdate(event) {
			console.log('volumeupdate: ', event);
		}		
	</script>
	
</head>
<body onload="bb.pushScreen('screen2.htm', 'screen2');">
<script> 
 var results = document.getElementById('results'); 
 var id = document.getElementById('id');
 var firstName = document.getElementById('firstName');  
 var lastName = document.getElementById('lastName');  
 var email = document.getElementById('email');
 // Create Tables
 var createTableUsers = "CREATE TABLE IF NOT EXISTS Users (id INTEGER PRIMARY KEY AUTOINCREMENT,firstName TEXT, lastName TEXT, userName TEXT, email TEXT)";
 var createIntoTables = createTableUsers;
 
 // Select Table
 var selectAllTables = "SELECT * FROM Users";
 var insertIntoTable = "INSERT INTO Users (firstName, lastName, userName, email) VALUES (?, ?, ?, ?)";
 var updateIntoTables = "UPDATE Users SET firstName = ?, lastName = ?, userName = ?,email = ? WHERE id = ?";

 var deleteIntoTables = "DELETE FROM Users WHERE id=?";
 var dropIntoTables = "DROP TABLE Users";
 
 var db = openDatabase("QNX", "1.0", "QNX Database",  5 * 1024 * 1024);
 
 var dataset;
 createTable();

      function onError(tx, error) {
        alert("ERROR - Table creation failed - code: " + error.code + ", message: " + error.message);
      }
      
      function showTables() {
	  if(results != null) {
		results.innerHTML = '';
        db.transaction(function(tx) {
          tx.executeSql(selectAllTables, [], function(tx, result) {
			dataset = result.rows;
            for (var i = 0, item = null; i < dataset.length; i++) {
              item = dataset.item(i);
              results.innerHTML += 
                  '<li>' + item['lastName'] + ' , ' + item['firstName'] + ' , ' + item['userName'] + ' , ' + item['email'] + ' <a href="#" onclick="loadRecord('+i+')">edit</a>  ' +  
 '<a href="#" onclick="deleteTables('+item['id']+')">delete</a></li>';
}
          });
        });
		}
      }
      
      function createTable() { 
        db.transaction(function(tx) {
          tx.executeSql(createIntoTables, [], showTables, onError);
        });
      }
      
      function insertRecord() {
        db.transaction(function(tx) {
          tx.executeSql(insertIntoTable, [firstName.value, lastName.value, userName.value, email.value], loadAndReset, onError);
        });
      }
      
 function loadRecord(i) {
var item = dataset.item(i); 
        firstName.value = item['firstName'];
lastName.value = item['lastName'];
email.value = item['email'];
id.value = item['id']; 
      }

      function updateTables() {
        db.transaction(function(tx) {
          tx.executeSql(updateIntoTables, [firstName.value, lastName.value, userName.value, email.value, id.value], loadAndReset, onError);
        }); 
      }
      
      function deleteTables(id) {
        db.transaction(function(tx) {
          tx.executeSql(deleteIntoTables, [id], showTables, onError);
        });
resetForm();
      }
       
      function dropTable() {
        db.transaction(function(tx) {
          tx.executeSql(dropStatement, [], showTables, onError);
        });
resetForm();
      }

 function loadAndReset(){
 resetForm();
 showTables();
 }

 function resetForm(){
firstName.value = '';
lastName.value = '';
email.value = '';
id.value = ''; 
 }
    </script>
</body>
</html>

And here is the htm file that is called with bb.pushScreen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<DIV data-bb-type="screen" data-bb-efect="fade">
	<div data-bb-type="title" data-bb-caption="Users Info" ></div>
	<div data-bb-type="grid-layout" data-bb-style="landscape" data-bb-header-style="solid" data-bb-header-justify="center" id="myGrid">
		<div data-bb-type="group" data-bb-title="my title">
			<div data-bb-type="row" data-bb-columns="2">
				<TABLE BORDER="1" style="width: 98%; margin: 1%;">
					<TR>
						<TD colspan="4">
							<div data-bb-type="group" data-bb-title="First Name">
							First Name:
							<input type="text" id="firstName"/>
						</TD>
					</TR>
					<TR>
						<TD colspan="4">
							<div data-bb-type="group" data-bb-title="Last Name">
							Last Name:
							<input type="text" id="lastName"/>
						</TD>
					</TR>
					<TR>
						<TD colspan="4">
							<div data-bb-type="group" data-bb-title="Username">
							Username:
							<input type="text" id="userName"/>
						</TD>
					</TR>
					<TR>
						<TD colspan="4">
							<div data-bb-type="group" data-bb-title="Email">
							Email:
							<input type="text" id="email"/>
						</TD>
					</TR>
				</TABLE>
				<div id="results"></div>
          </div>
		</div>
	</div>
	
	
	
	<DIV data-bb-type="action-bar" data-bb-back-caption="Exit">
			<!-- data-bb-overflow="true" ON A TAB STYLE MAKES THIS A ||| BUTTON INSTEAD OF A NORMAL BUTTON
				ONLY WORKS ON THE FIRST BUTTON. IT WILL HIDE ANY OTHER BUTTON!
			-->
		<div data-bb-type="action" data-bb-style="button" data-bb-overflow="false" data-bb-selected="false" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="resetForm()"> Reset Form </div>
		<div data-bb-type="action" data-bb-style="button" data-bb-selected="true" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="updateTables()"> Update User </div>
		<div data-bb-type="action" data-bb-style="button" data-bb-selected="false" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="insertRecord()"> Save User </div>
		<div data-bb-type="action" data-bb-style="button" data-bb-selected="false" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="dropTable()"> Delete User </div>
		<div data-bb-type="action" data-bb-style="button" data-bb-selected="false" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="dropTable()"> View Users </div>
		<!-- SHOW THE FOLLOWING IN "..." BUTTON -->
		<!-- data-bb-overflow="false" WILL HIDE THE BUTTON! -->
		<!-- data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-img="images/actionBar/cog_dark_theme.png" onclick="alert('sup Find!');">Find -->
	</DIV> <!-- END ACTION BAR -->
</DIV>

What I am trying to do is

connect both codes together
insert data from the form to sqlite
read data from sqlite and view it on the second screen (screen2.html) that is pushed using <div id="results"></div> to display it on

Welcome!

Web and WebWorks Development

Error retriving dtata from bb.pushScreen