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
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 pag

!DOCTYPE html PUBLIC-//W3C//DTD HTML 4.01 Transitional//Ehttp://www.w3.org/TR/html4/loose.dthtmheameta nameviewpor idMeta contentinitial-scale=1.0,user-scalable=n meta namex-blackberry-defaultHoverEffec contentfals link  relstyleshee typetext/cs hrefcss/common.cslink  link  relstyleshee typetext/cs hrefcss/start.cslink link  relstyleshee typetext/cs hrefcss/tabs.cslink 
titlAdd Birthda/titlscript typetext/javascrip srcjs/common.j/scripscript typetext/javascrip srcjs/html5_init.j idhtml5_ini/scripscript typetext/javascrip srcjs/birthdayapp.j/scrip
/heabody onLoadinit()
       div classmy_heade
	       p aligncenteAdd Birthda/
	   /di



	    
	       div classmain-pane
               div classpanel-top-lef/di
               div classpanel-top-righ/di
               div classpanel-insid
                div classpanel-noga
                   div classro
                       div classlaeFirst Name/di       
                       input typetex idfirstnam 
                   /di
                   div classlistSeparato/di    
                   div classro
                       div classlabeLast Name/di       
                       input typetex idlastnam 
                   /di
                   div classlistSeparato/di    
                   div classro
                       div classlabeEmail/di       
                       input typetex idemai 
                   /di
    
                    div classlistSeparato/di    
                   div classro
                       div classlabePhone Number/di       
                       input typetex idphonenumbe 
                   /di
                   div classlistSeparato/di   
                    div classro
                       div classlabeImage/di       
                       input typetex idimag 
                   /di
                   div classlistSeparato/di   
                    div classro
                       div classlabeBirthday/di       
                       input typetex idbirthda 
                   /di
                    div classlistSeparato/di   
                    div classro
                       div classlabeBaught Gift/di       
                       input typetex idbaughtgif 
                   /di
                       div classlistSeparato/di   
                    div classro
                       div classlabeReminder Day/di       
                       input typetex idreminderda 
                   /di
                    
                    
                    
                    
                /di
               /di
               div classpanel-bottom-lef/di
               div classpanel-bottom-righ/di
           /di
           input typebutto stylefloat: right; padding: 6px; margin-right: 8px idsav valueSav onClickmakeReminder()
        
        
        
        ul idreminder 
  
       /u 
        
        
        /bod/htm

 Now for the javascript database fil

//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';
}

 

Highlighted
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