CODEWITHSUNDEEP
jquery
Scarface
Scarface

Reputation: 3923

Append DOM issue when new objects loaded

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

Upvotes: 0

Views: 50

Answers (1)

Alastair Pitts
Alastair Pitts

Reputation: 19601

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.

Upvotes: 1

Related Questions