CODEWITHSUNDEEP
javascriptjqueryajaxappend
Mala
Mala

Reputation: 14843

Jquery: Appending data to a div AFTER ajax load operation

I have a setup much like this:

$('.container a').click(function(event) {
    event.preventDefault();
    $('#contents').remove();
    $(this).parent().append("<div id=\"contents\"></div>");
    $('#contents').html('<img src="/images/loading.gif" />')
                  .load("stuff.html")
                  .append("<div id=\"closebutton\"></div>");
});

However, the 'append' part seems to run before the load is completed, so that the closebutton div gets overwritten by the contents of stuff.html. How do I make it wait until the ajax operation has completed before performing the final append?

Thanks :)
Mala

Upvotes: 2

Views: 15690

Answers (2)

rahul
rahul

Reputation: 187110

Use the callback function [The function called when the ajax request is complete (not necessarily success)] for load and then append the content.

$('#contents').html('<img src="/images/loading.gif" />')
                  .load("stuff.html",function() { AppendContent(); } )

function AppendContent()
{
    // do your append function here
}

Upvotes: 4

Anwar Chandra
Anwar Chandra

Reputation: 8648

putting append inside callback function will work. 

$('.container a').click(function(event) {
    event.preventDefault();
    $('#contents').remove();
    $(this).parent().append("<div id=\"contents\"></div>");
    $('#contents').html('<img src="/images/loading.gif" />')
               .load('stuff.html',{},function(){
                  $(this).append('<div id=\"closebutton\"></div>");
               });
});

Upvotes: 8

Related Questions