Mootools 列表过滤器定期向服务器发出请求答案

【问题标题】：Mootools list filter with periodical request to the serverMootools 列表过滤器定期向服务器发出请求
【发布时间】：2013-07-23 18:07:01
【问题描述】：

我有一个 html 标记（在线用户列表）：

<div id="users">
   <div class="users_row" title="User1">User1</div>
   <div class="users_row" title="User2">User2</div>
   <div class="users_row" title="User3">User3</div>
   <div class="users_row" title="User4">User4</div>
</div>

下面是我的mootools js函数（每5秒周期函数）：

      get_users: function() {                   

                new Request.JSON({
                    initialDelay: 1,
                    delay: 10000,
                    limit: 25000,
                    method: 'post',
                    url: 'handler.php', 

                        onSuccess: function(data){
                            if (data.users.length) {
                                data.users.each(function(u){
/*Wrong...*/                                    
new Element('div', {'html':u.name, 'class': 'user_row', 'title': u.name}).inject(document.id('users')); 

                                });     
                            }       
                        }
                });
        }

例如，我从 handler.php 中获取 User1、User2、User3、User5。如何重建我的在线用户列表？

 <div id="users">
       <div class="users_row" title="User1">User1</div>
       <div class="users_row" title="User2">User2</div>
       <div class="users_row" title="User3">User3</div>
       <!--<div class="users_row" title="User4">User4</div>!--> // Remove User4
       <div class="users_row" title="User5">User5</div> // Add User5
 </div>

P.S：这个答案是不可接受的:)

document.id('users').set('html', '<div class="users_row" title="'+u.name+'">'+u.name+'</div>);

谢谢。

P.S：来自服务器的我的 JSON 样本：

{"users":[{"name":"User1"},{"name":"User2"},{"name":"User3"},{"name":"User5"}],"total":4}

【问题讨论】：

请求后总用户数有变化吗？或者你只是替换你已经拥有的标记的标题和 html？
是的。它可能会改变。例如房间里的新成员。或者有人离开了房间。谢谢。
你能发布一个 JSON/请求数据的样本吗？
是的。请检查上面。谢谢。
@user889349，为您发布了答案，如果您正在寻找，请告诉我。

标签： javascript list filter mootools element

【解决方案1】：

试试这个：
查看演示here

for (i = 0; i < users.users.length; i++) {
        var el = new Element('div', {
            'class': 'users_row',
            'html': users.users[i].name
        });
        el.inject(usersDivId);
    }

【讨论】：