bbui change innerHtml of an image list item

laurentC · ‎02-05-2010

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

superfly_fr · ‎12-23-2011

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 ]

tneil · ‎10-16-2008

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

laurentC · ‎02-05-2010

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

laurentC · ‎02-05-2010

Oh my god I replied before seeing Tim's answer

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

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

laurentC · ‎02-05-2010

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

superfly_fr · ‎12-23-2011

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.

tneil · ‎10-16-2008

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

laurentC · ‎02-05-2010

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

superfly_fr · ‎12-23-2011

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

Welcome!

Web and WebWorks Development

bbui change innerHtml of an image list item

Re: bbui change innerHtml of an image list item

Re: bbui change innerHtml of an image list item

Re: bbui change innerHtml of an image list item

Re: bbui change innerHtml of an image list item

Re: bbui change innerHtml of an image list item

Re: bbui change innerHtml of an image list item

Re: bbui change innerHtml of an image list item

Re: bbui change innerHtml of an image list item

Re: bbui change innerHtml of an image list item