Блог

Рассмотрим следующий список флажков — список сетевых и список автономных пользователей;

 <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, который может извлекать список онлайн- и офлайн-пользователей, добавлять / удалять их из списков, сохраняя отмеченные значения нетронутыми в списке «онлайн».

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

Воспользуйтесь другим подходом: вместо .load() использования, скажем, $.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 самостоятельно, используя существующий флажок, если он присутствует для этого идентификатора пользователя.

Вы могли бы сохранять в глобальном var при их изменении (onClick), а после .load , используя обратный вызов / что-то еще, перепроверять их.

Загружайте онлайн / оффлайн пользователей с помощью 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