HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,user-scalable=no"> <title>List</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> <h2 class="ui-title">TAU List</h2> </header> <div class="ui-content"> <ul id="currentlist" class="ui-listview"> <li>1</li> <li>2</li> </ul> </div> </div> <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> </body> </html>
Script file
<script> $.ajax({ type: "GET", url: 'x' dataType: 'JSON', success: function(data) { //test data = 3; $('#currentlist').append('<li>' + data + '</li>'); } }); </script>
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.