Question

我正在开发一个列表视图，它将显示来自json的数据的项目（节点）列表。我能够创建列表视图，但是，当我再次调用ajax时，数据将被附加到列表视图中。我想：

添加从ajax调用获得的任何新节点（如果有任何新节点）
修改当前列表视图的内容，以防任何文本被修改。例如，更新上次见过的＆＃39;反时间。

<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>

Answer 1

好的，我有一个有效的解决方案。我们的想法是检查其中一个元素是否已存在（在本例中为id'resta_ + Node_ID'。

如果它不存在则创建（追加）一个新行到列表视图

如果确实存在，则不执行任何操作。

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);
    });
}

Jquery mobile，创建listview并更新创建的内容视图ajax

1 个答案: