Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
Contributor
Posts: 47
Registered: ‎06-06-2011
My Device: bolt2
My Carrier: digicel jamaica
Accepted Solution

simple html5 database works in browser but not in emulator

[ Edited ]

I have a simple html5 database . it works on browser (chrome/safari) but not in emulator. If after including the html5_init.js file should not this work on a os five device? I have also simulated an sd card so that should not be an issue why this is not working. Here is the code:

 

html page

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" id="Meta1" content="initial-scale=1.0,user-scalable=no" />
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<link  rel="stylesheet" type="text/css" href="css/common.css"><link /> 
<link  rel="stylesheet" type="text/css" href="css/start.css"><link />
<link  rel="stylesheet" type="text/css" href="css/tabs.css"><link />

<title>Add Birthday</title>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/html5_init.js" id="html5_init"></script>
<script type="text/javascript" src="js/birthdayapp.js" ></script>

</head>
<body onLoad="init();">
        <div class="my_header">
	        <p align="center">Add Birthday</p>
	    </div>



	    
	        <div class="main-panel">
                <div class="panel-top-left"></div>
                <div class="panel-top-right"></div>
                <div class="panel-inside">
                 <div class="panel-nogap">
                    <div class="row">
                        <div class="label">First Name:</div>       
                        <input type="text" id="firstname" />
                    </div>
                    <div class="listSeparator"></div>    
                    <div class="row">
                        <div class="label">Last Name:</div>       
                        <input type="text" id="lastname" />
                    </div>
                    <div class="listSeparator"></div>    
                    <div class="row">
                        <div class="label">Email:</div>       
                        <input type="text" id="email" />
                    </div>
    
                     <div class="listSeparator"></div>    
                    <div class="row">
                        <div class="label">Phone Number:</div>       
                        <input type="text" id="phonenumber" />
                    </div>
                    <div class="listSeparator"></div>   
                     <div class="row">
                        <div class="label">Image:</div>       
                        <input type="text" id="image" />
                    </div>
                    <div class="listSeparator"></div>   
                     <div class="row">
                        <div class="label">Birthday:</div>       
                        <input type="text" id="birthday" />
                    </div>
                     <div class="listSeparator"></div>   
                     <div class="row">
                        <div class="label">Baught Gift:</div>       
                        <input type="text" id="baughtgift" />
                    </div>
                        <div class="listSeparator"></div>   
                     <div class="row">
                        <div class="label">Reminder Day:</div>       
                        <input type="text" id="reminderday" />
                    </div>
                    
                    
                    
                    
                 </div>
                </div>
                <div class="panel-bottom-left"></div>
                <div class="panel-bottom-right"></div>
            </div>
            <input type="button" style="float: right; padding: 6px; margin-right: 8px;" id="save" value="Save" onClick="makeReminder();">
        
        
        
         <ul id="reminders"> 
  
        </ul> 
        
        
        
</body>
</html>

 Now for the javascript database file

//Pre-requisites
var birthdayapp = {};

//Step 1. Opening the database
birthdayapp.db = null;


birthdayapp.open = function() {
  var dbSize = 5 * 1024 * 1024; // 5MB
  birthdayapp.db = openDatabase('bdreminder', '1.0', 'Birthday Reminder', dbSize);
}

birthdayapp.onError = function(tx, e) {
  alert('Something unexpected happened: ' + e.message );
}

birthdayapp.onSuccess = function(tx, r) {
  // re-render all the data
  // loadReminders is defined in Step 4a
  birthdayapp.getAllReminders(loadReminders);
  alert("an action was performed successfully!");
}


//Step 2. Creating the table
birthdayapp.createTable = function() {
  birthdayapp.db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS bdreminders(reminder_id INTEGER PRIMARY KEY ASC,'+
													    'firstname   varchar(50), '+
														'lastname    varchar(50), '+
														'email       varchar(50), '+
														'phonenumber varchar(50), '+
														'image       varchar(50), '+
														'birthday    varchar(30), '+
														'baughtgift  char(3),     '+
														'reminderday varchar(50),'+
				                                        'createdon   date)', []);
  });
}


//Step 3. Adding data to the table
birthdayapp.addReminder = function(firstname,lastname,email,phonenumber,image,birthday,baughtgift,reminderday) {
  birthdayapp.db.transaction(function(tx){
    var createdon = new Date();
    tx.executeSql('INSERT INTO bdreminders(firstname, lastname, email, phonenumber, image, birthday, baughtgift, reminderday, createdon) '+
				  'VALUES (?,?,?,?,?,?,?,?,?)', [firstname, lastname, email, phonenumber, image, birthday, baughtgift, reminderday, createdon],
        birthdayapp.onSuccess,
        birthdayapp.onError);
    });
}


//Step 4. Selecting data from the table
birthdayapp.getAllReminders = function(renderFunc) {
  birthdayapp.db.transaction(function(tx) {
    tx.executeSql('SELECT * FROM bdreminders', [], renderFunc, 
        birthdayapp.onError);
  });
}


//Step 4a. Rendering data from the table
function loadReminders(tx, rs) {
  var rowOutput = "";
  for (var i=0; i < rs.rows.length; i++) {
    rowOutput += renderReminders(rs.rows.item(i));
  }
  
  var reminders = document.getElementById('reminders');
  reminders.innerHTML = rowOutput;
}

function renderReminders(row) {
  return '<li>' + row.reminder_id + '[<a onclick="birthdayapp.deleteReminder(' + row.reminder_id + ');">X</a>]</li>';
}


//Step 5. Deleting data from the table
birthdayapp.deleteReminder = function(id) {
  birthdayapp.db.transaction(function(tx) {
    tx.executeSql('DELETE FROM bdreminders WHERE reminder_id=?', [id],
        birthdayapp.onSuccess, birthdayapp.onError);
  });
}


//Step 6. update the table
birthdayapp.updateReminder = function(reminder_id,firstname,lastname,email,phonenumber,image,birthday,baughtgift,reminderday) {
  birthdayapp.db.transaction(function(tx) {
    tx.executeSql('UPDATE bdreminders set firstname = ?, lastname = ?, email = ?,phonenumber = ?,image = ?,birthday = ?, baughtgift = ?, reminderday = ?  WHERE reminder_id = "reminder_id" ', [firstname, lastname, email, phonenumber, image, birthday, baughtgift, reminderday],
        birthdayapp.onSuccess, birthdayapp.onError);
  });
}


//Step 7. select a specific from table
birthdayapp.getOneReminder = function(reminder_id) {
  birthdayapp.db.transaction(function(tx) {
    tx.executeSql('SELECT * FROM bdreminders WHERE reminder_id = ? ', [reminder_id],
        birthdayapp.onSuccess, birthdayapp.onError);
  });
}

//select specific record
function makeReminder(){
   alert("add reminder called");
	
  var fn = document.getElementById('firstname').value;
  var ln = document.getElementById('lastname').value;
  var em = document.getElementById('email').value;
  var ph = document.getElementById('phonenumber').value;
  var im = document.getElementById('image').value;
  var bd = document.getElementById('birthday').value;
  var bg = document.getElementById('baughtgift').value;
  var rd = document.getElementById('reminderday').value;
  
  birthdayapp.addReminder(fn,ln,em,ph,im,bd,bg,rd);
 
  
  
}

//init function
function init() {
  birthdayapp.open();
  birthdayapp.createTable();
  birthdayapp.getAllReminders(loadReminders);
}

 

 

Contributor
Posts: 47
Registered: ‎06-06-2011
My Device: bolt2
My Carrier: digicel jamaica

Re: simple html5 database works in browser but not in emulator

No One can help with this? Ok what are the possible reasons why this would not work on the phone even though it works in the browser?

Developer
Posts: 189
Registered: ‎08-13-2008
My Device: Not Specified

Re: simple html5 database works in browser but not in emulator

Hi

 

I think the Desktop browsers are a little more forgiving the the mole devices when it comes to HTML DB stuff.

 

 

I think there could be 2 different issues with your code.

 

1. ASYNC nature of HTML 5 DB calls.

 

You are calling the method - birthdayapp.getAllReminders(loadReminders) in the "init" function SYNCHRONOUSLY after calling birthdayapp.createTable();

 

When you create tables in HTML5 it is done ASYNCHRONOUSLY, so you need to wait until this has completed before carrying out a select on the table.

 

So you need to remove the call to birthdayapp.getAllReminders(loadReminders) in the init function

 

and add it in the callback in function that creates the tables

e.g.

birthdayapp.createTable = function() {
  birthdayapp.db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS bdreminders(reminder_id INTEGER PRIMARY KEY ASC,'+
                 'firstname   varchar(50), '+
              'lastname    varchar(50), '+
              'email       varchar(50), '+
              'phonenumber varchar(50), '+
              'image       varchar(50), '+
              'birthday    varchar(30), '+
              'baughtgift  varchar(30), '+
              'reminderday varchar(50),'+
                                            'createdon   date)', [], birthdayapp.getAllReminders(loadReminders),birthdayapp.onError);
  });
}

 

 

2. inserting the javascript date object into a SQLITE DATE FIELD

try removing the date in the insert see if that works.

 

//Step 3. Adding data to the table
birthdayapp.addReminder = function(firstname,lastname,email,phonenumber,image,birthday,baughtgift,reminderday) {
  birthdayapp.db.transaction(function(tx){
    var createdon = new Date();
    tx.executeSql('INSERT INTO bdreminders(firstname, lastname, email, phonenumber, image, birthday, baughtgift, reminderday) '+
      'VALUES (?,?,?,?,?,?,?,?)', [firstname, lastname, email, phonenumber, image, birthday, baughtgift, reminderday],
        birthdayapp.onSuccess,
        birthdayapp.onError);

    });
}

 

 

 

Cheers

 

Andrew

 

 

 

Contributor
Posts: 47
Registered: ‎06-06-2011
My Device: bolt2
My Carrier: digicel jamaica

Re: simple html5 database works in browser but not in emulator

birthdayapp.createTable = function() {
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										 birthdayapp.db.transaction(function(tx) {
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																														//this is run only once after app is opened for first time
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																														tx.executeSql('CREATE TABLE IF NOT EXISTS bdreminders(reminder_id INTEGER PRIMARY KEY ASC,'+
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																	'firstname   varchar(50), '+
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										'lastname    varchar(50), '+
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																										'email       varchar(50), '+
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																							'phonenumber varchar(50), '+
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																			'image       varchar(50), '+
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																		'birthday    varchar(30), '+
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																														'baughtgift  char(3),     '+
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																		'reminderday varchar(50),'+
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																		'createdon   date)', [], birthdayapp.getAllReminders(loadReminders),birthdayapp.onError);
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																											
 //this is run every time the app is initialized

birthdayapp.getAllReminders(loadReminders); }); }

 This is what worked for me. Thanks so much

Contributor
Posts: 47
Registered: ‎06-06-2011
My Device: bolt2
My Carrier: digicel jamaica

Re: simple html5 database works in browser but not in emulator

[ Edited ]

I later found out that this script which I see in the UIExample files created by RIM causes the database not to initialize also. I dont know why or a work around to it. This script is very important to make the page fit the lenght of the screen? any ideas of how else i could get this to work without causing an effect on the db?

 

//this script cause html5 database not to work
addEventListener('load',doLoad,false);


function doLoad() {
    document.body.style.height = screen.height + 'px';
}

 

Contributor
Posts: 47
Registered: ‎06-06-2011
My Device: bolt2
My Carrier: digicel jamaica

Re: simple html5 database works in browser but not in emulator

I

//this script cuase html5 database not to work
//addEventListener('load',doLoad,false);//comment out the //addEventListener and its fixed


function doLoad() {
    document.body.style.height = screen.height + 'px';
}


//then call the function using onload  
<body onload="doLoad();">

 

was able to fix the script by doing this