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
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell
Accepted Solution

Javascript Image List (With Data from a Database)

Hi,

 

I'm trying to get a list created based on a database.  I am using Webworks and Ripple (for testing).

 

Up to now I have this code:

<script type="text/javascript">
    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
	tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
</script>

 This creates my database to hold my list items.

 

Once my page is pushed into view, I use this code to read the database and populate my list.

<script>
  db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   for (i = 0; i < len; i++){
   msg = "<div data-bb-type='item' data-bb-title='" + results.rows.item(i).log + "'></div>";
   document.querySelector('#incomplete').innerHTML +=  msg;
     }
 }, null);
});

</script>

 Then, I have a section (on the same screen) that looks like this:

 

<div data-bb-type="image-list" id="incomplete" data-bb-images="none" data-bb-style="arrowlist">
		 
</div>

 

My idea was that for each item in my database, it would create a seperate item in the list, however, nothing works :smileysad:  I've spent over 10 hours trying to get it to work, to no avail.  I am new at this and would appreciate the help.

 

I know for a fact that the database is populated however as I can see the data in it.

 

Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Javascript Image List (With Data from a Database)

Actually I've modified the code a little to the following:

<script>
 db.transaction(function (tx) {
  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   for (i = 0; i < len; i++){

var previousInnerHTML = new String();
        
        previousInnerHTML = document.getElementById("incomplete").innerHTML;
        
        previousInnerHTML = previousInnerHTML.concat("<div data-bb-type=\"item\" data-bb-title=\"" + results.rows.item(i).log);
        previousInnerHTML = previousInnerHTML.concat("\"><\div> ");

        document.getElementById("incomplete").innerHTML = previousInnerHTML;
            }
 },  null);
});

</script>

 

and noticed that the code actually is inserted, however it does not lead to the creation of a list item... Why is that?? 

Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Javascript Image List (With Data from a Database)

Hi Marc,

 

The reason for your noticed behavious is that you need to build these DOM elements manually as described in the bbUI wiki here (scroll down to the "Image List JavaScript Interface" section).

 

This method works like a charm - at least for me. :smileywink:

- - -
My approved apps @ App World
Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Javascript Image List (With Data from a Database)

:Surrender:

Hey. Thanks for the reply. It so happens that I stared at that wiki manual for hours yesterday and couldn't understand what I needed to do.  Could you give me a small example of what I should be doing.  I'd really appreciate it.

Thanks for everything!!
Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Javascript Image List (With Data from a Database)

Sure. This is probably the easiest code example possible:

 

document.getElementById('mylist').clear()
    
    myList.forEach(function(listItem) {
        var item = document.createElement('div')
        item.setAttribute('data-bb-type','item')
        item.setAttribute('data-bb-title',listItem.line1)
        item.setAttribute('data-bb-img',listItem.imageURL)
        item.innerHTML = listItem.line2
        item.onbtnclick = function() {doSomething()}
        document.getElementById('mylist').appendItem(item);
    })

 

Your code must meet the following assumptions in order to make this run:

 

Somewhere in your HTML code you need to have an image-list with the ID used in JS ("mylist" in this example). This code might look like this:

<div id="mylist" data-bb-type="image-list" data-bb-style="removebuttons"></div>

 Next you need to have your data stored somewhere. In my example I use a simple array of objects:

var myList = [
{
line1: 'test 1',
line2: 'test 2',
imageURL: 'img/test.png'
},
{
line1: 'another line',
line2: 'another subheading',
imageurl: 'img/test2.png'
}
]

 

I hope this example makes things more obvious. :smileyhappy:

- - -
My approved apps @ App World
Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Javascript Image List (With Data from a Database)

Ok. I don't know what I'm doing wrong, however if I take your supplied code and paste it in -- The first part inside &lt;script&gt; tags, the middle in my HTML and the bottom part on top of the same &lt;script&gt; tag as the first, my page doesn't load anymore in Ripple.

:smileysad: Do you think you can help :smileywink:
Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Javascript Image List (With Data from a Database)

What error(s) do you see in Chrome's developer Console?

- - -
My approved apps @ App World
Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Javascript Image List (With Data from a Database)

  1. Uncaught TypeError: Cannot call method 'clear' of null list.js:15
    1. (anonymous function)list.js:15
  1. Uncaught TypeError: Cannot call method 'clear' of null list.js:15
    1. (anonymous function)list.js:15
  1. GET http://localhost:9910/SloganQuiz/images/icons/icon6.png 404 (Not Found) bbui.js:4810
    1. outerElement.styleItembbui.js:4810
    2. (anonymous function)bbui.js:856
    3. _bb10_imageList.applybbui.js:5170
    4. bb.stylebbui.js:228
    5. bb.doLoadbbui.js:218
    6. bb.initContainerbbui.js:376
    7. (anonymous function)bbui.js:365

 

 

For the icon6 error, I just haven't created it yet.  But I don't think that should affect it.

Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Javascript Image List (With Data from a Database)

 

You're right: The missing button does not affect your error. :smileywink:

 

When do you call this function (and the following lines)?

document.getElementById('mylist').clear()

 

You need to wait for the DOM to finish rendering, before you can gain access via the "getElementById" function.

Probably the easiest way is by using the built-in bbUI trigger of bb.init in the ondomready section:

 

bb.init({
                actionBarDark: true,
                controlsDark: true,
                listsDark: false,
                // LOTS OF OTHER STUFF HERE...
                ondomready: function(element, id) {
                    // The ID should match the one from pushScreen (second parameter)
                    if (id == 'yourfile') {
                        initYourStuff(); // CALL YOUR LIST.JS INIT HERE!
                    }
                }
            })
            bb.pushScreen('yourfile.html', 'yourfile')

 

- - -
My approved apps @ App World
Please use plain text.
New Developer
marc25v
Posts: 27
Registered: ‎07-24-2012
My Device: Blackberry Dev Alpha
My Carrier: Bell

Re: Javascript Image List (With Data from a Database)

You are a genius :smileyvery-happy:

lol

Thanks for your help.
Please use plain text.