如何通過Ajax更新複選框列表而不取消選中它

請考慮以下複選框列表 - 聯機列表和脫機用戶列表;如何通過Ajax更新複選框列表而不取消選中它

<h1>Users</h1> 
<div id="users"> 
<h2>Online</h2> 
<ul> 
     <li><input type="checkbox" name="userId[]" value="1" /> Joe Bloggs</li> 
     <li><input type="checkbox" name="userId[]" value="2" /> Bill Gates</li> 
     <li><input type="checkbox" name="userId[]" value="3" /> John Smith</li> 
</ul> 
<h2>Offline</h2> 
<ul> 
     <li><input type="checkbox" disabled="disabled" name="userId[]" value="4" /> The Queen</li> 
     <li><input type="checkbox" disabled="disabled" name="userId[]" value="5" /> Steve Jobs</li> 
</ul> 
</div>

用戶可以查看在線用戶，然後執行一個動作，例如發送它們（1或更多）的郵件 - 但我需要的列表，用戶登錄和退出制度的動態更新。

我用來更新列表每20秒左右的代碼是這樣的;

$("#users").load("/path/to/my/users/load.php");

，但顯然這只是替換HTML中的「用戶」分區和未檢查的任何「在線」用戶（這是煩人，如果用戶還沒有執行該操作），已檢查盒。

所以總之;我努力在jQuery中編寫必要的代碼，可以獲取在線和離線用戶的列表，在列表中添加/從列表中刪除它們，同時將選中的值保留在「在線」列表中。

來源

2011-06-02 J.C

1）包裝你列出一個表格
2）序列化選擇複選框
3）執行您的DOM更換
4）通過選擇複選框反覆測試，並重新應用

var checked = $('#users form').serializeArray(); 
//perform ajax call 

//in the ajax success function after replacing the DOM 
$.each(checked, function(i, data) { 
    $('input[name="'+data.name+'"][value="'+data.value+'"]').attr('checked', 'checked'); 
});

來源

2011-06-02 17:24:38 devmatt

這不是一個壞主意。 – 2011-06-03 08:09:28

採取不同的方法：不是，使用，比方說，$.getJSON()檢索對象，看起來像：

{ 
    online: [ 
     {id: 1, name: 'Joe Bloggs'}, 
     {id: 2, name: 'Bill Gates'}, 
     {id: 3, name: 'John Smith'} 
    ], 
    offline: [ 
     {id: 4, name: 'The Queen'}, 
     {id: 5, name: 'Steve Jobs'} 
    ] 
}

和更新HTML自己，如果存在該用戶ID使用現有的複選框。

來源

2011-06-02 17:16:12

這正是我要建議，一爲速度更快。 – 2011-06-02 17:16:43

你可以保存在一個全局變量當他們被改變（onClick），並在.load之後，使用回調/其他東西，重新檢查它們。

來源

2011-06-02 17:21:38 Kraz

負荷在線/使用ajax的離線用戶，並根據其狀態移動元素。我拿到這個：

// Define all users  
var allUsers = {users:[ 
      {id: 1, name: 'Joe Bloggs'}, 
      {id: 2, name: 'Bill Gates'}, 
      {id: 3, name: 'John Smith'}, 
      {id: 4, name: 'The Queen'}, 
      {id: 5, name: 'Steve Jobs'} 
     ] 
    }; 

    // Define which users are online 
    var onlineUser = [2,3,5,12,76]; 


    $.each(allUsers.users,function(id,user){ 
     $('<input />').attr('type','checkbox').attr('name','userId[]').val(user.id).attr('disabled','disabled').appendTo($('<li />').text(user.name).appendTo($('#offline'))); 

      }); 






    // function to update which users are online 
    function reloadUsers(onlineUsers){ 
     $('#online li input').attr('disabled','disabled').parent().appendTo($('#offline')); 
     $.each(onlineUsers, function(id,user){ 

      $('#offline [value="'+user+'"]').attr('disabled',false).parent().appendTo($('#online')); 
     }); 

    } 
// load online users on document load 
reloadUsers(onlineUser); 

// just used in the text example to show how to update online users 
$("#reload").click(function(){ 
     reloadUsers($("textarea").val().split(",")) 
    });

例子：http://jsfiddle.net/niklasvh/4zde9/

來源

2011-06-02 17:35:44 Niklas

如何通過Ajax更新複選框列表而不取消選中它

回答

相關問題