[Samsung Gear S2] jcbmania:
Hello,

I try to create anew Web Application for the GS2 using the Tizen SDK (Version : 2.4.0_Rev5 Build id : 20151223-1448).

In the main page I create a list element, to which I then add new button elements via code.

I'm using the template TAUList. Unfortunately, the scrolling using the bezel is only scrolling through the items in the list, which are initially in the list. All later added items can be scrolled only by using the touch screen. Can someone tell me, what I'm doing wring here?

Is there something,which I have to re-init, after I have altered the list?

Thanks for any hints.

( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
if( ev.keyName === "back" ) {
var page = document.getElementsByClassName( 'ui-page-active' )[0],
pageid = page ? page.id : "";
if( pageid === "main" ) {
try {
tizen.application.getCurrentApplication().exit();
} catch (ignore) {
}
} else {
window.history.back();
}
}
} );
} () );

var XML_ADDRESS = "them? cmd=jsonlist2 room=Wohnzimmer STATE&XHR=1",
XML_METHOD = "GET";
var devListArray;
var xmlhttp;

function getFhemData(){

var objDevs = document.getElementById('devList');
var i;

xmlhttp = new XMLHttpRequest();

xmlhttp.open(XML_METHOD, XML_ADDRESS, true);
xmlhttp.overrideMimeType("application/json");
xmlhttp.setRequestHeader("Authorization", "Basic " + btoa("xxxxx" + ":" + "xxxxxxxx"));
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
var JSONCode = JSON && JSON.parse(xmlhttp.responseText);
devListArray = JSONCode.Results;
var dli;
for (i = 0; i < devListArray.length; i++) {
dli = createDevice(devListArray[i]);
objDevs.appendChild(dli);
}
xmlhttp = null;
};
}

function createDevice(dev) {

var li = document.createElement('li');
li.setAttribute('class','li-has-toggle');
var la = document.createElement('label');
la.innerHTML =dev.Name;

var divInp = document.createElement('div');
divInp.setAttribute('class','ui-toggleswitch');

var inp = document.createElement('input');
inp.setAttribute('type','checkbox');
var state = dev.Internals;

if(state.STATE ==='on'){
inp.setAttribute('checked');
}
inp.setAttribute('class','ui-switch-input');
inp.setAttribute('value','test2');
var divInpBut = document.createElement('div');
divInpBut.setAttribute('class','ui-switch-button');
divInp.appendChild(inp);
divInp.appendChild(divInpBut);
la.appendChild(divInp);
li.appendChild(la);
return li;
}

function init() {
getFhemData();
}
window.onload = function() {
init();
};

The Page:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Circular UI</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">TAU List</h2>
</header>
<div class="ui-content">
<ul class="ui-listview" id="devList">
<li><a href="#">List1</a></li>
<li><a href="#">List2</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>