Cannot display data from database using BBUI

iruka · ‎09-17-2012

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.

LBP · ‎04-29-2011

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.

iruka · ‎09-17-2012

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?

The_Anomaly · ‎08-06-2012

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.

The_Anomaly · ‎08-06-2012

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.

Welcome!

Web and WebWorks Development

Cannot display data from database using BBUI

Re: Cannot display data from database using BBUI

Re: Cannot display data from database using BBUI

Re: Cannot display data from database using BBUI

Re: Cannot display data from database using BBUI