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
Trusted Contributor
Magnetic_dud
Posts: 121
Registered: ‎03-06-2012
My Device: Z10

Change data-bb-img programmatically with bbui.js

Hi, I am making an app using bbui.js, and I would like to change programmatically the data-bb-img of an image list (think about an "unread icon" become "read" after clicking)

 

How I could do that?

Contributor
ssupreet
Posts: 23
Registered: ‎07-14-2009
My Device: Not Specified

Re: Change data-bb-img programmatically with bbui.js

I am facing the same issue, 

i need to update the image in the imageList on the fly but donno how to do that ..

 

anybody found a solution, please help.

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

Re: Change data-bb-img programmatically with bbui.js

If you are able to get the list item you want to change the data-bb-img attribute it isn't that difficult to do what you want as you might think of.


If you know the items id attribute and the image-list element's id then try something like this (untestet):

 

// we need to find the item with the id (eg. "itemId") we want to change
var item2change = document.getElementById("itemId");
item2change.setAttribute("data-bb-img", imgSourcePath);

// we need the image-list to apply changes; eg: <div id="imgListId" data-bb-type="image-list">
var container = document.getElementById("imgListId");
// we apply the changes made to the image-list to rerender it
bb.imageList.apply([container]);

 

If this doesn't work you could also redraw the whole image-list, add all items again with the attributes you need and also call again:

 

// we apply the changes made to the image-list to rerender it
bb.imageList.apply([container]);

With this piece of source code you should be able to handle the changes made to the image-list item, hopefully.

 

 

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Contributor
ssupreet
Posts: 23
Registered: ‎07-14-2009
My Device: Not Specified

Re: Change data-bb-img programmatically with bbui.js

it doesn't work..

 

I mean , if i try an change the image, using the way u mentioned it add a new row inside an existing row rather than just updating the existing row .

so now I have overlapping rows :smileysad: .

 

 

what I am forced to do because of this if to refresh the whole list , which does slows down the application ..

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

Re: Change data-bb-img programmatically with bbui.js


ssupreet wrote:
I mean , if i try an change the image, using the way u mentioned it add a new row inside an existing rowrather than just updating the existing row .

so now I have overlapping rows :smileysad: .

 

 

what I am forced to do because of this if to refresh the whole list , which does slows down the application ..


That's not possible since in my piece of source there isn't any source to add new rows, only for updating an attribute of an already existing item so it should only change the item. Have you tried either with the bbUI onscreenready and ondomready event handlers to use the code in the one or the other?!


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Contributor
ssupreet
Posts: 23
Registered: ‎07-14-2009
My Device: Not Specified

Re: Change data-bb-img programmatically with bbui.js

I find it strange aswell, but this is what is happening..

 

All tht I am doing in my code is retrieving an existing item from the list and modifying its img tag..

 

below is what I tried and it still creating another row inside the existing row :smileysad:

 

var itemList=document.getElementById('dataList').getItems();

for(var i=itemList.length-1;i>=0;i--)
{

var item = document.getElementById('dataList').getItems()[i];

item.setAttribute('data-bb-accent-text','test');

}

 

var container=document.getElementById('dataList');
bb.imageList.apply([container]);

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

Re: Change data-bb-img programmatically with bbui.js

Can you add here or just PM me some more of your source from HTML and JS to have a closer look at it


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Change data-bb-img programmatically with bbui.js

Wow, seems to be somehow little bit tricky, do not know if this is due to bbUI.sj or not, but I found a way to change attributes.

 

Let me show a tutorial-like example to change attribute "data-bb-accent-text" of all items of a bbUI "image-list", except the header item, using the onscreenready event handler of bbUI.js:

 

1.)  screen sample HTML source, stored in sample_dataList.html file:

 

<div data-bb-type="screen" data-bb-effect="fade">
	<div id="sample.dataList" data-bb-type="image-list" data-bb-header-justify="left">
		<div data-bb-type="header">TestHeader</div>
		<div data-bb-type="item" data-bb-img="images/imageList/1.jpg" data-bb-title="title1" data-bb-accent-text="accent1">innerHTML1</div>
		<div data-bb-type="item" data-bb-img="images/imageList/2.jpg" data-bb-title="title2" data-bb-accent-text="accent2">innerHTML2</div>
		<div data-bb-type="item" data-bb-img="images/imageList/3.jpg" data-bb-title="title3" data-bb-accent-text="accent3">innerHTML3</div>
		<div data-bb-type="item" data-bb-img="images/imageList/4.jpg" data-bb-title="title4" data-bb-accent-text="accent4">innerHTML4</div>
		<div data-bb-type="item" data-bb-img="images/imageList/5.jpg" data-bb-title="title5" data-bb-accent-text="accent5">innerHTML5</div>
	</div>
</div>

2.) I created a function to be called by the onscreenready bbUI.js event handler that looks like this:

 

function onscreen_sample_dataList(element, id) {
    var dataList = element.getElementById("sample.dataList");
    
    for(var i=0; i<dataList.childNodes.length; i++) {
        /* do: check if this is an element we can change using setAttribute and if it isn't the data-bb-type="header" element */
        if("getAttribute" in dataList.childNodes[i] && dataList.childNodes[i].getAttribute("data-bb-type") === "item" && "setAttribute" in dataList.childNodes[i]) {
            /* do: change the "data-bb-accent-text" attribute of the item to something like "changedItem_i" */
            dataList.childNodes[i].setAttribute("data-bb-accent-text", "changedItem_"+parseInt(i-1, 10));
        }
    }
}

3.) using the onscreenready event handler I call this function to change the list items accent text:

 

onscreenready: function(element, id) {
	...
	
	if(id === 'screen_sample_dataList') {
		onscreen_sample_dataList(element, id);
	}
	
	...
}

4.) To show the screen directly or from an eg. buttons onclick handler I use:

 

bb.pushScreen('sample_dataList.html', 'screen_sample_dataList');

 

Thats it. Hopefully this is helpfull for anyone.

 

BTW: IMO, I do not know if there is something like a "race condition" in bbUI.js pushing screens since the childNodes of an element using bbUI.js look different to what I would expect and have worked with in the past and the behaviour to work with them is also somehow different.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.