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

时间:2013-07-23 18:07:02

标签: javascript list filter mootools element

我有一个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}

1 个答案:

答案 0 :(得分:0)

试试这个:
查看演示 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);
    }