Как я могу обновить список флажков через Ajax, не снимая их

Question

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

<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 в div «users» и снимает флажки с любых «онлайн» полей, которые были проверены пользователем (что раздражает, если пользователь еще не выполнил действие).

Итак, вкратце;Я изо всех сил пытаюсь написать необходимый код в jQuery, который может извлекать список онлайн и офлайн пользователей, добавлять / удалять их из списков, сохраняя при этом проверенные значения без изменений в «онлайн» списке.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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