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
Regular Contributor
iruka
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800

Cannot display data from database using BBUI

Hi all! I'm new to mobile development and have recently come across Webworks, Ripple and BBUI. I have a bit of problem trying to display data from database using BBUI.

 

This is my index.html where it loads all the necessary .js files and .css files and also push the menu screen

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/bbui-0.9.3.css"><link />
<script type="text/javascript" src="js/bbui-0.9.3.js"></script>
        <script type="text/javascript" src="js/test.js"></script>
        <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
		<script type="text/javascript">
		bb.init();
		</script>
</head>
<body onload="bb.pushScreen('menu.html', 'menu'); createTable();">
</body>
</html>	

 


**test.js is the javascript file where all the database functions are kept**

 

This is the menu.html

 

<div data-bb-type="screen">
<div data-bb-type="title" data-bb-caption="1...2...3...Testing"></div>
<div data-bb-type="screen">
 <div data-bb-type="image-list">
  <div data-bb-type="item" data-bb-img="images/add.png" onclick="bb.pushScreen('addusers.html', 'adduser');" data-bb-title="Add Users">A simple function to add users</div>
  <div data-bb-type="item" data-bb-img="images/edit.png" data-bb-title="Edit Users">A simple function to edit users</div>
  <div data-bb-type="item" data-bb-img="images/view.png" onclick="bb.pushScreen('viewusers.html', 'viewuser');" data-bb-title="View Users">A simple function to view users</div>
  <div data-bb-type="item" data-bb-img="images/delete.png" data-bb-title="Empty Table" onclick="bb.pushScreen('deletetable.html', 'deletetable')">A simple function to empty table</div>
 </div>
</div>
</div>

 

My problem here is that when click on "viewusers.html" to retrieve the data in database.

 

The file for viewusers.html

 

<div data-bb-type="screen">
  <div data-bb-type="title" data-bb-caption="View All Users"></div>
  <div data-bb-type="image-list" data-bb-images="none">
   <div id="content">
   <script type="text/javascript" src="js/test.js">
     viewAll();
   </script>
   </div>
  </div>
</div>

 

The function to viewAll in test.js

 

function viewAll()
{
  var tableDB = openSesame();
  var viewSql ="SELECT * FROM user";
  tableDB.transaction(function(tx) {
    tx.executeSql(viewSql, [], function(tx, results) {
	  var len = results.rows.length;
	  var i;
	  var displayResult;
	  displayResult = '<div data-bb-type=\"item\" data-bb-title=\"Number of users\">Total Records: '+len+'</div>';
	  document.querySelector('#content').innerHTML += displayResult;
	  for(i = 0; i < len; i++)
	  {
	    displayResult = '<div data-bb-type=\"item\" data-bb-title=\"'+results.rows.item(i).name+'\">'+results.rows.item(i).address+'</div>';
		document.querySelector('#content').innerHTML += displayResult;
	  }
    }, null);
  });	
}

 

"Number of users" and "results.rows.item(i).name" inside the "data-bb-title" will not be displayed.

 

Any help or advice would be greatly appreciated. Thank you.

 

Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Cannot display data from database using BBUI

First of all are you getting errors in the Web Inspector debugging your page/source?

 

Then you should try to use the bbUI.js functionality to call something if screen or DOM is ready, so your createTable(); might not work since the bbUI screen isn't ready when you call your function.

 

I suggest to use something like this, well documented in the bbUI.js documentations for toolkit initialization:

 

bb.init({
    onscreenready : function(element, id) {
       // do something on screen ready
    },
    ondomready: function(element, id) {
        // do something on DOM ready
        if (id == 'menu') {
            // call your createTable function
            createTable();
        }
    }
});

So there is no need to call it within the body "onload" attribute.

 

Another thing is your source code here isn't really well:

 

<script type="text/javascript" src="js/test.js">
	viewAll();
</script>

First of all .js sources used for a specific screen should be added directly after the data-bb-type="screen" declaration as shown in the documentation.

 

So first of all set up the Web Inspector to debug your source and get errors if there are and then read through the documentation of bbUI.js since there are more optimizations possible for your source (eg. avoid .innerHTML += ...).


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Regular Contributor
iruka
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800

Re: Cannot display data from database using BBUI

Actually there are no errors. index.html,menu.html,addusers.html.I can load the index page that loads the menu.html. There's no problem adding users using addusers.html. There problem in displaying data in viewusers.html whereby div data-bb-type="item" etc does not get display out, unless if I use plain html formatting. Am I calling BBUI in the wrong place?
Developer
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: Cannot display data from database using BBUI

You've done a pretty good job so far!

 

1.  There's definitely something wrong with your script tag on viewusers.html.  You cannot include a js file AND run inline code AFAIK.  Also you cannot run inline code on a bbui screen, it has to be in an external js file.  You are also re-calling the test.js which is previously loaded in the index.html.

 

2.  In your bb.init(); you need to call the script to manipulate the page.  See post by LBP.

If it helped you, click like. :smileyhappy:
Developer
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: Cannot display data from database using BBUI

I also had no errors when running certain global scripts from the main index.html.

 

In fact my app just stopped loading with no errors in th web inspector.  The minute I removed the js and just left bbui everything was fine.  I now include only what I need on the screen I'm working on.

If it helped you, click like. :smileyhappy:
Contributor
mhuda
Posts: 35
Registered: ‎03-19-2011
My Device: 9550

Re: Cannot display data from database using BBUI


The_Anomaly wrote:

You've done a pretty good job so far!

 

1.  There's definitely something wrong with your script tag on viewusers.html.  You cannot include a js file AND run inline code AFAIK.  Also you cannot run inline code on a bbui screen, it has to be in an external js file.  You are also re-calling the test.js which is previously loaded in the index.html.

 

2.  In your bb.init(); you need to call the script to manipulate the page.  See post by LBP.


Point 1 above solve my problem ... thanks :smileyhappy: