Tau list view items not clickable

Galaxy Watch for Tizen Tizen Web APIs
1

hello. I have created a dynamic list view as below. I used ui-listview here.

    var homeListView = document.getElementById("home-list-view");
	var tauHomeListView = tau.widget.Listview(homeListView);
	
	homeListView.innerHTML = null;
	
    // element 1
	var balanceLi = document.createElement("li");
	var balanceDiv = document.createElement("div");
	var balanceIcon = document.createElement("img");
	balanceIcon.src = "/assets/images/icon_balance.png";
	var balanceText = document.createElement("h4");
	balanceText.innerHTML = "Balance";
	balanceDiv.appendChild(balanceIcon);
	balanceDiv.appendChild(balanceText);
	balanceLi.appendChild(balanceDiv);
    balanceDiv.addEventListener('click', function() {
		navigateFromHome("balance");
	});
	tauHomeListView.addItem(balanceLi.innerHTML,1);
	
    // element 2
	var smsLi = document.createElement("li");
	var smsDiv = document.createElement("div");
	var smsIcon = document.createElement("img");
	smsIcon.src = "/assets/images/icon_sms.png";
	var smsText = document.createElement("h4");
	smsText.innerHTML = "SMS";
	smsDiv.appendChild(smsIcon);
	smsDiv.appendChild(smsText);
	smsLi.appendChild(smsDiv);
	smsLi.addEventListener('click', function() {
		navigateFromHome("sms");
	});
	tauHomeListView.addItem(smsLi.innerHTML,2);

The items are rendered as I expected. but unfortunately, the click event added to li components not triggering. I added those to inside div elements. nothing happens. hope you support this. Thanks!

2

To prevent problems add the event to the li element…
About the code I would recommend doing like this:

smsLi.setAttribute("onclick","navigateFromHome('sms');");
3

hmm. not success dect. thanks for your support. i don’t know why some of events not working

4

Well, one last try, this is how I do and it works with me (just copy and paste):

var homeListView = document.getElementById("home-list-view");
var tauHomeListView = tau.widget.Listview(homeListView);

	tauHomeListView.destroy();

	homeListView.innerHTML = "";

var balanceLi = document.createElement("li");
	balanceLi.setAttribute("onclick","navigateFromHome('balance');");
	
var balanceDiv = document.createElement("div");

var balanceIcon = document.createElement("img");
	balanceIcon.src = "/assets/images/icon_balance.png";

var balanceText = document.createElement("h4");
	balanceText.innerHTML = "Balance";

	balanceDiv.appendChild(balanceIcon);
	balanceDiv.appendChild(balanceText);
	
	balanceLi.appendChild(balanceDiv);
	
	homeListView.appendChild(balanceLi);				

var smsLi = document.createElement("li");
	smsLi.setAttribute("onclick","navigateFromHome('sms');");

var smsDiv = document.createElement("div");

var smsIcon = document.createElement("img");
	smsIcon.src = "/assets/images/icon_sms.png";
	
var smsText = document.createElement("h4");
	smsText.innerHTML = "SMS";

	smsDiv.appendChild(smsIcon);
	smsDiv.appendChild(smsText);

	smsLi.appendChild(smsDiv);

	homeListView.appendChild(smsLi);				

tauHomeListView = tau.widget.Listview(homeListView);
5

here you have a good example how to declare tau listview
https://docs.tizen.org/application/web/api/4.0/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm

6

innerHTML gets text value from <li>

You have to add sth like this: listv.addItem("<li>Test<div data-role='button' data-inline='true'>TEST</div></li>", 2);

it is only simple example

7

actually i need to do this dynamically