List View remove/add items

List View remove/add items

BY 21 Nov 2016 Web Application Development

Hi, i’m tryng to create a bluetooh devices list, that display in real time the devices nearby .

But unfortunatelly when i remove or add a new device to the list, the select animation stop’s working.
Does anyone can tell me what im doing wrong? i have tried so many different ways, but i can’t find a solution, and in decomentation

Device:
-Samsung gear S3 


this is my code:
Html

    <div class=”ui-page” id=”devicesListPage” >
        <header class=”ui-header my-header” >Dispositivos</header>
        <div class=”ui-content” >
            <ul class=”ui-listview ui-snap-listview” id=”listDevices”  data-role=”listview”></ul>

        </div>
    </div>

 

Javascript:
// i use this function do start, remove and add items to the list

        createDeviceList = function (device,remove) {
                var page = document.querySelector(‘#devicesListPage’),
                list = document.getElementById(“listDevices”),
                aux = list.getElementsByTagName(“li”),
                boolAux = true;

// auxilairPageDevices => global variabel  of type bool to see if the page was launched previously 

                if (auxilairPageDevices) {
                    page.addEventListener(“pagebeforeshow”, function() {
                        var snapListComponent = tau.widget.SnapListview(list);
                    });
                }

// searches for the <li> component to see if its requeired to remove any item
 

                for (var i = 0; i < aux.length; i++) {

// this if checks if the item already exists, if exists and var remove is true it will delete, if remove is not true it means that the device is already on the list
                    if(aux[i].getAttribute(‘address’) == device.address){
                        boolAux = false;
                        if (remove === true) {
                            list.removeChild(aux[i]);
                            var snapListComponent = tau.widget.SnapListview(list);
                            snapListComponent.refresh()
                        }
                        break;
                    }
                }

// if in the previous for cicle the device wasn’t found in the list, it will add now
                if (boolAux) {
                     list.innerHTML+='<li  address=”‘+device.address+'” onclick=”connectDevices()”> <div  class=”ui-marquee”>’+ device.name +'</div></li>’;
                    var snapListComponent = tau.widget.SnapListview(list);
                    snapListComponent.refresh()
                }

                if(auxilairPageDevices){
                    tau.changePage(page);
                    auxilairPageDevices = false;
                }
            }

Written by