Question

I have a problem with my JQuery script. I am making a 2d chat where people have their own figure like Habbo hotel, but the JQuery script that is suppose to move the figures is bugging.

I think it is easier to show the problem:
Click here to see the problem

I am using the following script to update the figures:

function UpdateRoom() {
    var data = 'roomId='+roomId;

    $.ajax({
        type: "GET",  
        url: "chatfunctions/updateroom.php",
        dataType: 'json',
        data: data,
        success: function(data){

            $.each(data, function(i, data) {
                var temp = parseInt(data.field);
                $('#f' + temp).append('<div class="user" id="'+charId+'" />');
            });
        }
    }); 
}

The #f+temp is the id of the field that the figure should be places at. The charId is the id of the figure.

And then I am calling the script every 500 miliseconds:

window.setInterval(function() {
    UpdateRoom();
}, 500 );

Im not sure if this is enough code and example for you guys to help me. If not please tell me if I need to provide more for you to help me. My guess is that it is the .append(); function that is used wrong, but I’m no expert in JQuery.

Answer 1

You are only continuing to append but not replacing anything.

Try to either use .html() or .empty().

$.each(data, function(i, data) {
    var temp = parseInt(data.field);
    $('#f' + temp).html('<div class="user" id="'+charId+'" />');
});

or

$.each(data, function(i, data) {
    var temp = parseInt(data.field);
    $('#f' + temp).empty(); // clear out all content
    $('#f' + temp).append('<div class="user" id="'+charId+'" />');
});

not knowing your code you might need to move the call to .empty() outside your each loop.