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
Developer
laurentC
Posts: 264
Registered: ‎02-05-2010
My Carrier: Bouygues Telecom

bbui change innerHtml of an image list item

Hi,
I'm working on a bbui project.
My app consists on a simple image-list with items.

<div data-bb-type="screen">
    <div data-bb-type="title" data-bb-caption="Send a gift"></div>
    <script id="bbm" src="js/sendAGift.js"></script>
    
    <div data-bb-type="image-list" id="giftsList">
        <div data-bb-type="item" onclick="shareContentBBM('coffee');" data-bb-img="images/giftsList/coffee.png" data-bb-title="Coffee" >1</div>    
        <div data-bb-type="item" onclick="shareContentBBM('smile');" data-bb-img="images/giftsList/smile.png" data-bb-title="Smile" >2</div>    
        <div data-bb-type="item" onclick="shareContentBBM('ring');" data-bb-img="images/giftsList/ring.png" data-bb-title="Ring" >3</div>    
    </div>
</div>

When the user click on an item, I want to share a content on BBM (with blackberry.bbm.platform.users.shareContent) and update the innerHtml of the item with :

var dataList = document.getElementById("giftsList");    
dataList.childNodes[0].innerHTML = "new inner html";

The code above is not working. The inner HTML stays unchanged. I'm reading the bbui.js wiki but I can't find a way to do such a thing. I believe you can manipulate your screen elements only when the screen is loaded. Am I wrong ?

Looking through the forum, I've found a sample code and I realize I need to add the code below to apply the changes :

bb.imageList.apply([dataList]);

Can you help please ?
Laurent

Twitter : @LaurentKP
My apps
Please use plain text.
Regular Contributor
superfly_fr
Posts: 53
Registered: ‎12-23-2011
My Carrier: SFR

Re: bbui change innerHtml of an image list item

[ Edited ]

is this related ? (see just above my thanks)

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Tutorial-Using-bbUI-s-onscreenre...

 

[P.S: posted waiting Tim's time zone hour for a decent wake up :smileywink:]

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,702
Registered: ‎10-16-2008
My Carrier: Rogers

Re: bbui change innerHtml of an image list item

You cannot change the innerHTML of a list item once it has been styled and added into the DOM. You can however change its properties via JavaScript.  Details on a list item JavaScript interface can be found at the bottom of its wiki page

 

https://github.com/blackberry/bbUI.js/wiki/Image-List

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
laurentC
Posts: 264
Registered: ‎02-05-2010
My Carrier: Bouygues Telecom

Re: bbui change innerHtml of an image list item

Maybe... What I understand is I need to initialize a global variable domElement in the ondomready element.
Regarding Tim's recommendations, I need to put my code in a function --> init_dataList_domElement(element);

To change the innerhtml of my first imagelist item :
var dataList = domElement.getElementById("giftsList");    
dataList.childNodes[0].innerHTML = "new inner html";

Is it better ?

My code :

<html>
  <head>
      <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="bbui-0.9.3.css"></link>
      <script type="text/javascript" src="bbui-0.9.3.js"></script>    
      <script id="initList" src="js/init.js"></script>
      
      <script type="text/javascript">
        bb.init({onscreenready : function(element, id) {
                   if (id == 'menu') {
                       onscreen_init_dataList(element);
                  }
                }},
                {ondomready : function(element, id) {
                   if (id == 'menu') {
                       init_dataList_domElement(element);
                  }
                }            
                }
                
                );
      </script>
  </head>
  <body onload="registerBBM();bb.pushScreen('menu.htm', 'menu');">    
  </body>
</html>

init.js :

function init_dataList_domElement(element) {
    var domElement = element;
}

Twitter : @LaurentKP
My apps
Please use plain text.
Developer
laurentC
Posts: 264
Registered: ‎02-05-2010
My Carrier: Bouygues Telecom

Re: bbui change innerHtml of an image list item

[ Edited ]

Oh my god I replied before seeing Tim's answer :Wacko:

 

And I understand I can't do it that way with bbui.js :smileysad:

BBUI seems to be good for presenting datas but how can we react to user events ? We always need to modify a text, change an image, add a field in a screen in an app. I'm not sure to fully understand bbui philosophy ?

 

Twitter : @LaurentKP
My apps
Please use plain text.
Developer
laurentC
Posts: 264
Registered: ‎02-05-2010
My Carrier: Bouygues Telecom

Re: bbui change innerHtml of an image list item

Instead of using an image-list, what if I use a table ?

Could I change the innerHTML like that :

var monTableau = document.getElementById("tableau");    
monTableau.rows(0).cols(1).innerHTML = "new innerHTML";

 

 

<table id = "tableau" >
        <tr>
        <td><img src="images/giftsList/coffee.png" ></td>
        <td>Coffee:  0 received 0 sent</td>    
        <div data-bb-type="button" onclick="shareContentBBM('coffee');">+</div>
        </tr>
        
        <tr>
        <td><img src="images/giftsList/smile.png" ></td>
        <td>Smile:  0 received 0 sent</td>        
        <div data-bb-type="button" onclick="shareContentBBM('smile');">+</div>
        </tr>
        
        <tr>
        <td><img src="images/giftsList/ring.png" ></td>
        <td>Ring:  0 received 0 sent</td>        
        <div data-bb-type="button" onclick="shareContentBBM('ring');">+</div>
        </tr>
    </table>

Twitter : @LaurentKP
My apps
Please use plain text.
Regular Contributor
superfly_fr
Posts: 53
Registered: ‎12-23-2011
My Carrier: SFR

Re: bbui change innerHtml of an image list item

[ Edited ]

Regarding Tim's link, it seems that you cannot modify the innerHtml of one item by script. But it does state you can list, delete and append ...
So maybe you could :
1/ locate your item in the list with the getItems() function
2/ delete the item with the remove() function
3/ Add it with new content at its original position with the insertItemBefore( newItem, existingItem ) function

I don't know how this will visualy render, nor if there is a performance issue ... so take it as-is, just a suggestion.

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,702
Registered: ‎10-16-2008
My Carrier: Rogers

Re: bbui change innerHtml of an image list item

There are also functions attached to the list item where you can change its image, title, description and accent text

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
laurentC
Posts: 264
Registered: ‎02-05-2010
My Carrier: Bouygues Telecom

Re: bbui change innerHtml of an image list item

 Is it possible to remove an item in a list if it's not selected ?
 
 Wiki doc :
 var selected = document.getElementById('mylist').selected;
 selected.remove();
 
 What if I want to remove the 3rd item (selected or not) ?

Twitter : @LaurentKP
My apps
Please use plain text.
Regular Contributor
superfly_fr
Posts: 53
Registered: ‎12-23-2011
My Carrier: SFR

Re: bbui change innerHtml of an image list item

[ Edited ]

I'll try this (not tested).
var theList= document.getElementById('mylist');
theList[2].remove();

Please use plain text.