Odtnhj

I am trying to build a Tizen Web Application for wearables using TAU.
I have this list:

<ul class="ui-listview" id="nearbyList">
 <li class="ui-listview-divider">Nearby</li>


 <li class="li-has-multiline li-has-thumb-left">
 <a href="contents/place1.html">Place 1
 <span class="ui-li-sub-text li-text-sub">Info 1</span>
 <span class="ui-li-sub-text li-text-sub">xxxx</span>
 <img src="../../../css/images/place1.png" class="ui-li-thumb-left">
 </a>
 </li>

 <li class="li-has-multiline li-has-thumb-left">
 <a href="index-old.html">Open Elements
 <span class="ui-li-sub-text li-text-sub">xxxx</span>
 <span class="ui-li-sub-text li-text-sub">xxxx</span>
 <img src="../../../css/images/open.png" class="ui-li-thumb-left">
 </a>
 </li>

 </ul>

which I need to edit using JS with data I fetch from the web. The problem is when I try to edit the list using JQuery, it doesn't seem to work and instead renders the new elements behind the existing list. Using the debugger Menu in Tizen Studio, I can see TAU heavily edits the HTML, resulting in my #nearbyList not containing the elements I specified above, therefore JQuery adding it and TAU not acknowledging it and updating accordingly.

This is the code I try to use to add elements to the list:

$('#nearbyList').append('<li class="ui-li-grid"> <div>Finding Location</div> <div class="ui-processing"></div></li>');//processing animation

Which instead renders this:

This is how I initialise my scripts:

<script src="lib/jquery.min.js"></script>
<script src="js/circle-helper.js"></script>

<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="lib/tau/wearable/js/tau.js"></script>
<script src="lib/jsSHA/sha1.js"></script>
<script src="js/web.js"></script>
<script src="js/location.js"></script>

Any help on how to correctly use JQuery with TAU to add elements to a list would be great.

Thank you.

You may simply use JS to add item in list. I have create each item like below and add by a loop.

UL = document.getElementById("list");
li = document.createElement("LI");
var textnode = document.createTextNode("Title");
li.appendChild(textnode);
nodeA = document.createElement("A");
var textnode2 = document.createTextNode("Link");
nodeA.appendChild(textnode2);
span = document.createElement("SPAN");
var textnode3 = document.createTextNode("Content");
span.appendChild(textnode3);
li.appendChild(nodeA);
li.appendChild(span);
UL.appendChild(li);

It won't atleast break your TAU list.