Question

I have a function that is live on click and it gets a bunch of messages and loads them in. The problem is, after that I would like to append a link at the bottom box, after the messages are loaded into that box but after the messages load, it appends the link before them. Does anyone see anything wrong with my code? I thought since the messages were appended first, they ranked earlier in the DOM even though they are faded in.

$('#reply').live('click', function() {
    var id='somevalue';

    //load messages
    $.getJSON(files+"loader.php?action=view&load=replies&reply_chunk_id="+id+"&topic_id="+topic_id+"&username="+username+"&t=" + (new Date()), function(json) {                                                                     
        var html = '';

        for(i=0; i < json.length; i++) {
            html += prepare(json[i]);
        }

        $('div[chunk_id="'+id+'"]').append(html).find('li').fadeIn(3500);

    });  
    //link
    $('div[chunk_id="'+id+'"]').append('<a chunk_id="'+id+'" id="scroll_value" value="stop_scroll">Test</a>');
}

Answer 1

The issue is that $.getJSON is not a synchronous request, so what is happening is that you are sending off the ajax request, then appending the link straight away, and then when the AJAX request returns, the messages are loaded after the link.

Move your link append into the AJAX callback to fix this.