Hi @ll,
I tried to get the selected item of an image-list (bbui-0.9.2.js). If I try to get the selected item described here
https://github.com/blackberry/bbUI.js/wiki/Image-List
...the result is always 'undefined'
Here is my code snip:
var mc;
var bb10HighlightColor = '#00A8DF';
bb.init({bb10HighlightColor: bb10HighlightColor,
bb10ActionBarDark: true,
bb10ControlsDark: true,
bb10ListsDark: false,
bb10ForPlayBook: true,
onscreenready: function(element, id) {
if (id == 'dataOnLoad') {
dataOnLoad_initialLoad(element);
} else if (id == 'imagelist') {
var resultList = element.getElementById('resultlist');
for (var i = 0; i < mc.count; i++) {
var item = document.createElement('div');
item.setAttribute('data-bb-type', 'item');
item.setAttribute('id', mc.contactarray[i].ID);
item.setAttribute('data-bb-title', mc.contactarray[i].Company);
item.setAttribute('data-bb-img','img/company.png');
item.innerHTML = mc.contactarray[i].Zip + " " + mc.contactarray[i].City;
item.onclick = function() { onItemSelected('test'); };
resultList.appendChild(item);
}
}
},
ondomready: function(element, id) {
}
});
function doSearch() {
parseJASONAndOpenList('{"count":3,"contactarray":[{"Company":"Acme Inc.","Lastname":"Jackson","Firstname":"Bill","City":"Maincity","ID":"45D6"},{"Company":"Backman Inc.","Lastname":"Burger","Firstname":"Marc","City":"Downtown","ID":"45D7"},{"Company":"Jingle Inc.","Lastname":"Sampson","Firstname":"John","City":"Outercity","ID":"45D8"}]}');
};
function parseJASONAndOpenList(jsonString) {
mc = JSON.parse(jsonString);
bb.pushScreen('imagelist.htm', 'imagelist');
};
function onItemSelected(text) {
alert(text);
var selectedItem = document.getElementById('resultlist').selected;
alert(selectedItem.getAttribute('id')); //selectedItem is always undefined here
}
The image list:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
</head>
<body id="bodylist">
<div data-bb-type="screen" data-bb-effect="fade">
<div data-bb-type="title" data-bb-caption="Search result" data-bb-back-caption="Back" ></div>
<div data-bb-type="image-list" id="resultlist" data-bb-image-effect="fade">
<div data-bb-type="item" id="TEST1" data-bb-img="img/company.png" onclick="onItemSelected('Item clicked')" data-bb-title="Test">Test item</div>
</div>
<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
</body>
</html> The image list holds one item hardcoded (id="TEST1"), then I add three items dynamically. After selecting one of the Items, I want to show more details in a new screen.
I tried to solve that in different ways, but the result of
var selectedItem = document.getElementById('resultlist').selected;is always 'undefined'.
I'm looking forward of any help!!
