Ajax实时更新跨度

Question

I'm trying to get a online/offline status update for a chatsystem. Currently I'm stuck on how to update a span in real time. I got things working but it keeps adding the value (person which is online) to my span. What I want to achieve is to have a static list of people (those who are inside my database), and next to it a green bullet if they are online.

This is my jQuery script:

function theStatus(type, msg){
    $("#status").append(
        "<span class='status "+ type +"'>"+ msg +"</span>"
    );
}

function getStatus(){
$.ajax({
    type:       "get",
    url:        "php/ajax/status_users.php",

    async:      true,
    cache:      false,
    timeout:    1000,

    success: function(data){
        theStatus("rt", data);
        setTimeout(
            getStatus,
            1000
        );
        } 
    });
};


$(document).ready(function(){
    getStatus();
});

All help is welcome!

Answer 1

I don't know what your php script returns now, but I would have it return key - value pairs of username slugs and statuses.

Then you could add the username slug as an ID to each user span and target the correct span to change the status if necessary or to add an additional user if it is not found in the html.

At the moment you are simply appending span's each time your ajax function returns a result instead of checking the existing list against the returned list from the server.