Question

I am currently coding an instant chatbox using jquery which will show the latest chat on top (refreshes when user send data via post request)
and push the oldest chat downward and remove it.

The problem is that if more than one latest chat is retrieved(for example, 2), two new div will be prepended but only one oldest div is removed instead of two…I tried timeout but it didnt work either..

Below are the code snippets I believe which got problem in it.

function showData(currentchatstyle, data, final){
   var newchatstyle;
    if (currentchatstyle == "chatone") {
        newchatstyle = "chattwo";
    }
    else {
        newchatstyle = "chatone";
    }

    $('div[class^="chat"]:first').before('<div class="' + newchatstyle + '" style="display:none;">' + data + ' </div>');
    $('div[class^="chat"]:first').slideDown(500,"swing", function(){
        $('div[class^="chat"]').last().fadeOut(500, function() {
            $(this).remove(); 
        });
    });

    return newchatstyle;
}

$('input[name="content"]').keyup(function(key) {
    if (key.which==13) {

        var author = $('input[name="author"]').val();
        var content = $('input[name="content"]').val();
        var lastnum = $('postn:first').text();
        var chatstyle = $('div[class^="chat"]:first').attr("class");

        $.post(
            "chatajax.php",
            { "author": author, "content": content, "lastnum": lastnum }, 
            function(data) {
                var msg = data.split("|~|");
                for (var i = 0; i < msg.length; i++) {
                    chatstyle = showData(chatstyle, msg[i], true);
                }
            }
        ); 
    }
});

Help will be very much appreciated.

Answer 1

The problem is that you do select also currently-fading-out divs with $('div[class^="chat"]').last(), as you don’t remove them immediately but in the animation callback. You for example might immediately remove the chat class so it won’t be selected in the next call to showData.

Also, you should only use one class “chat” for a similar divs and for a zebra-style give them independent classes.

var chatstyle = "one";
function showData(data, final){
    chatstyle = chatstyle=="one" ? "two" : "one";
    var newDiv = $('<div class="chat '+chatstyle+'" style="display:none;">'+data+'</div>');
    $('div.chat:first').before(newDiv);
    newDiv.slideDown(500, "swing", function(){
        $('div.chat:last').removeClass('chat').fadeOut(500, function() {
//                        ^^^^^^^^^^^^^^^^^^^^
            $(this).remove(); 
        });
    });
}
function post(data) {
    return $.post(
        "chatajax.php",
        data,
        function(data) {
            var msg = data.split("|~|");
            for (var i = 0; i < msg.length; i++)
                showData(msg[i], true); // what's "final"?
        }
    );
}

$('input[name="content"]').keyup(function(key) {
    if (key.which==13)
       post({
           "author": $('input[name="author"]').val(),
           "content": $('input[name="content"]').val(),
           "lastnum": $('postn:first').text() // I'm sure this should not be extracted from the DOM
       });
});