Question

I have a container $(‘#container’) and I want to dynamically load several elemtents into the container. I have a php layout called subElement.php. So my code looks like:

for(i = 0;i<10;i++){
    $('#container').load('subElement.php?id='+i,function(data){});
}

Only one subElement.php layout is loaded in to the container. How can I do this in a better way?

Answer 1

Ideally, you should rewrite your PHP script to get all the data at once, so you only need one .load. Doing so will be faster and much gentler on the user’s network connections.

However, since you asked us to work with what you have:

for(i = 0;i<10;i++){
    $('#container').append($('<span>').load('subElement.php?id='+i));
}

If those <span> elements are going to mess up your code, though, you should go with a solution like Explosion Pills’ instead.