RhysO RhysO - 5 months ago 13
jQuery Question

JQuery not appending properly

I'm trying to load some XML using the

JQuery.load
function, and that bit is going fine. I'm loading the XML and putting it into the DOM, which is what I want. However, I then need to iterate through the top level child elements and append certain nodes to a different Container. All will become clear when you see the below code:

this is my JS and the storage element:

<div id="ProjectLoad" style="display:none"></div>

<script type="text/javascript">
$('#ProjectLoad').load('projects.xml');


$('project').each(function(){
debugger;
var name = $(this).children('name').first().text();
var desc = $(this).children('desc').first().text();
var created = $(this).children('created').first().text();
var uri = $(this).children('url').first().created();

$('#trapezoidContainer').append('<div id="' + name + '" class="trapezoid-container"></div>');

$('#' + name).append('<div id="sub-' + name + '" class="trapezoid"></div>');

$('#sub-' + name).append('<a href="' + uri + '">' + name + '</a>');

$(this).hover(function(){
$('#title').text(name);
$('#description').text(desc);
})

})
</script>


And this is my projects.xml:

<projects>
<project>
<name>Test</name>
<desc>Simple test project</desc>
<created>17/11/1998</created>
<url>http;//www.gitlab.com/roconnor/test</url>
</project>
</projects>


I have a debugger statement in the
.each()
, but it isn't being hit, which is making me thing the
.load()
is executing after the
.each()
due to latency...

Answer

You have to use the complete option in load-

$('#ProjectLoad').load('projects.xml', function() {
 //just after the end of loading
$('project').each(function(){
                debugger;
//and so on
});

source