Question

I would like to load some content via Ajax direcly into a target container.

var theData = $('<div id="tempcontainer">').load('/'+targetProject + ' #containerUID' + targetProject);                 
$( theData ).prependTo( '#targetContainer' );

This loads the data into my #targetContainer, but leaves me with an unnecessary #tempcontainer.
Since i want to load multiple items into my #targetContainer i can’t have duplicate #tempcontainers.

What i would like to achieve is to insert the loaded data hidden into my #targetContainer without having duplicate #tempcontainers (avoid it completely would be even better), measure it’s height (whilst hidden if possible), call some functions and fadeIn when the content has loaded.

Thanks in advance!

Greetings,
Knal.

Answer 1

load() is just a handy shortcut for $.get, so if storing the data in a variable, $.get is probably more appropriate. Then just hide the content, prepend it and fade it in. I do it in a different order to avoid some issues, but that does’nt matter :

$.get('/'+targetProject , function(data) {
    $( data ).find('#containerUID' + targetProject)
             .hide()
             .fadeIn()
             .prependTo( '#targetContainer' );
});