jQuery Mobile，创建listView并更新创建的内容视图AJAX

我正在研究列表视图，该列表将显示来自JSON的数据列表（节点）。但是，我能够创建listView，但是，当我再次致电AJAX时，数据将附加到列表视图中。我想：

添加从Ajax调用获得的任何新节点（如果有新的节点）
如果修改任何文本，则修改当前列表视图的内容。例如，要更新"最后一个看到"计数器时间。

<script>
requestData();
function requestData() {
$.getJSON('../ajax/ajax_nodes.php', function(data) {
    console.log(data);
    $.each(data, function(i, row) {
        console.log(JSON.stringify(row));
        console.log( "JSON Data ID: " + row.id );
        console.log( "JSON Data Name: " + row.name );
        $('#movie-list').append('<li><a href="" data-id="' + 
        row.id + '" ' + 'id="node_"' + row.Node_ID + '><img src="../images/' + 
        'alive.png' +'"/><h3>' + 
        row.name + '</h3><p>' + 
        'Last seen: ' + row.resta + ' secs</p></a></li>');
    });
    $('#movie-list').listview('refresh');
    // call it again after one second
    setTimeout(requestData, 5000);  
});
}
</script>
</head>
<body>
<div data-role="page" id="home">
    <div data-theme="a" data-role="header">
        <h3>
            Movie List
        </h3>
    </div>  
    <div data-role="content">
        <div class="example-wrapper" data-iscroll>
            <ul data-role="listview"  id="movie-list" data-theme="a">
            <!-- javascript will populate this listview -->
            </ul>
        </div>
    </div>
    <div data-theme="a" data-role="footer">
        <h1>Copyright 2013</h1>
    </div>  
</div>

好的，我有一个工作解决方案。这个想法是检查其中一个元素是否已经存在（在这种情况下，ID" resta_ node_id"。

如果不存在，则创建（附加）listView

的新行

如果确实存在，什么也不做。

function requestData() {
    $.getJSON('../xx/xxxx.php', function(data) {
        console.log(data);
        counter = counter +1
        console.log("counter: " + counter)
        $.each(data, function(i, row) {
    if(document.getElementById("resta_" + Node_ID)){
        //console.log("existe");
    } else {
        //console.log("no existe");
        // create the node
        $('#movie-list').append('<li><a href="" data-id="' + 
    row.id + '" ' + 'id="node_"' + row.Node_ID + '><img src="../images/' + 
    'alive.png' +'"/><h3>' + 
    row.name + '</h3><p>' + 
    'Last seen: ' + row.resta + ' secs</p></a></li>');
    }
    // '<div class="lastseen" id="resta_' + row.Node_ID + '"> Last seen: ' + row.resta + ' secs</div>' + 
    if (counter > 1){
        // update certain values after each timer update
        document.getElementById("resta_" + row.Node_ID).innerHTML = "" + resta_texto + "";
        document.getElementById("rssi_" + row.Node_ID).innerHTML = "" + rssi + "";
        document.getElementById("bat_" + row.Node_ID).innerHTML = "" + battery + "  V";
    }
});
$('#movie-list').listview('refresh');
// call it again after one second
setTimeout(requestData, 2000);
    });
}

相关内容

最新更新

热门标签：