Dynamically adding fetched items to a listview
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,user-scalable=no">
<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/">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
<div class="ui-page ui-page-active" id="main">
<h2 class="ui-title">TAU List</h2>
<div class="ui-content">
<ul id="currentlist" class="ui-listview">
<script src="js/jquery-3.3.1.js"></script>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/circle-helper.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/app.js"></script>
Script file
type: "GET",
url: 'x'
dataType: 'JSON',
success: function(data) {
data = 3;
$('#currentlist').append('<li>' + data + '</li>');
I have already tried the tau.widget.ListView and it's useless.
var element = document.getElementById("currentlist"),
list = tau.widget.Listview(element);
list.addItem("<li>3</li>", 3); //this is not a function
list.refresh(); //this does nothing
I don't understand why this is so hard to do. Someone explain what's wrong with this.


1 Replies
Erik van Gompel

I encountered exactly the same issue and spend a lot of time in understanding and resolving this problem.

I solved the problem by reloading the page after after having updated the ListView using `location.reload()`.
Also I realized this may not be applicable to all situations or may need some adaptation of the existing scripts.