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
karelvuong
Posts: 10
Registered: ‎07-04-2013
My Device: BlackBerry Z10
My Carrier: Fido
Accepted Solution

BB10 - Problems w/ Dynamically Populating Image List With Data From WebSQL

[ Edited ]

Hello all,

 

So I am having some issues with setting an item's onclick attribute when dynamically populating an image list.

 

function listAllRooms() {

    ...

    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM ROOMS', [], function (tx, results) {

 

       for (i = 0; i < len; i++){
           var elName = results.rows.item(i).name,
           elID = results.rows.item(i).id;

           item = document.createElement('div');
           item.setAttribute('data-bb-type','item');
           item.setAttribute('data-bb-title', elName);
           item.innerHTML = "Description here.";
           item.setAttribute('data-bb-img','foo.png');

           item.onclick = function() {bb.pushScreen('showRoom.html', 'showRoom', {id: elID});};

           items.push(item);
       }

       document.getElementById('rooms-list').refresh(items);
       }, null);

    });
}

 

My problem lies with the red, bolded line. What is happening is that each item links to the last item (last row in the table). I know it has something to do with callbacks and synchronization but can't for the life of me figure it out.

 

Apologies for the ugly code and thanks in advance for the assistance.

 

Karel

Please use plain text.
Developer
Innovatology
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone

Re: BB10 - Problems w/ Dynamically Populating Image List With Data From WebSQL

Your elID variable contains the correct value during creation of your div elements, but the onclick event is called later. The elID variable contains a different value then.

 

You could use a data- attribute to store your elID value, then retrieve it from the onclick handler. A simplified example:

 

http://jsfiddle.net/eSzyD/

 

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Please use plain text.
Contributor
karelvuong
Posts: 10
Registered: ‎07-04-2013
My Device: BlackBerry Z10
My Carrier: Fido

Re: BB10 - Problems w/ Dynamically Populating Image List With Data From WebSQL

Thanks Jon.

So the id is correctly stored as an attribute, but I'm unable to retrieve it from the onclick handler.

Uncaught TypeError: Cannot read property 'currentTarget' of undefined
- item.onclick

Would this have something to do with it being wrapped in a db transaction?
Please use plain text.
Developer
Innovatology
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone

Re: BB10 - Problems w/ Dynamically Populating Image List With Data From WebSQL

[ Edited ]

karelvuong wrote:
So the id is correctly stored as an attribute, but I'm unable to retrieve it from the onclick handler.
Uncaught TypeError: Cannot read property 'currentTarget' of undefined
- item.onclick

Remember that your click handler should accept an event parameter, .e.g:

 

item.onclick = function (e) { ...

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,546
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: BB10 - Problems w/ Dynamically Populating Image List With Data From WebSQL

I believe the issue stems from item being a single variable which ultimately points at one location in memory, and the array items all reference that one location as item gets updated. How about something along the lines of this.

 

...

items.push(document.createElement('div');
items[items.length - 1].setAttribute('data-bb-type', 'item');
items[items.length - 1].setAttribute('data-bb-title', elName);
items[items.length - 1].innerHTML = "Description here.";
items[items.length - 1].setAttribute('data-bb-img','foo.png');

items[items.length - 1].onclick = function() {bb.pushScreen('showRoom.html', 'showRoom', {id: elID});};

...

 

You could clean that up a little but this way, you're dealing with individual items direclty, as opposed to one reference that all items are based on.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Contributor
karelvuong
Posts: 10
Registered: ‎07-04-2013
My Device: BlackBerry Z10
My Carrier: Fido

Re: BB10 - Problems w/ Dynamically Populating Image List With Data From WebSQL

[ Edited ]

I actually managed to make it work by doing this:

 

item = document.createElement('div');
item.setAttribute('data-bb-type','item');
item.setAttribute('data-bb-title', elName);
item.setAttribute('data-id', elID);
item.innerHTML = "Description here.";
item.setAttribute('data-bb-img','img/icons/item-dark.png');
item.setAttribute('onclick', "bb.pushScreen('show.html', 'show', {type: 'item', id: " + elID + "})");
Thanks for all of your help!
Please use plain text.