Question

I’m trying to use append to generate html using data from an xml file. But I’m having trouble getting nested data to appear in the proper html elements. Code is coming up. hopefully you can see what I’m going for.

Javascript

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "data.xml",
    dataType: "xml",
    success: parseXml
  });
})

function parseXml(xml) {

    $(xml).find('period').each( function(){
        $('#timeline').append('<div id="slide">');

        $(this).find('event').each(function(i,e){
            $('#slide').append('<div class="image-div">\
            <h1>' + $(this).attr('year') + '</h1>\
            <h2>' + $(this).find('title').text() + '</h2>\
            <img src="images/' + $(this).find('image').text() + '" />\
            <p>' + $(this).find('description').text() + '</p></div>');
        });
        $('#slide').append('</div>');
    });
}

XML file – data.xml

<?xml version="1.0" encoding="utf-8"?>
<timeline>
    <imgurl>images/</imgurl>
    <period date="1910">
        <event year="1912">
            <title>Here's a title</title>
            <image>temp.jpg</image>
            <description>Lorem ipsum </description>
        </event>
        <event year="1915">
            <title>Here's a title</title>
            <image>temp.jpg</image>
            <description>Lorem ipsum </description>
        </event>
        <event year="1917">
            <title>Here's a title</title>
            <image>temp.jpg</image>
            <description>Lorem ipsum </description>
        </event>
    </period>
    <period date="1920">
        <event year="1924">
            <title>Title number 2</title>
            <image>temp.jpg</image>
            <description>Lorem ipsum </description>
        </event>
    </period>
    <period date="1930">
        <event year="1937">
            <title>This is the 3rd one</title>
            <image>temp.jpg</image>
            <description>Lorem ipsum </description>
        </event>
    </period>
</timeline>

The html output structure that I’m going for is something like:

<div id="timeline">
    <div id="slide">
        <div class="image-div">...</div>
        <div class="image-div">...</div>
        <div class="image-div">...</div>
    </div>
    <div id="slide">
        <div class="image-div">...</div>
    </div>
    <div id="slide">
        <div class="image-div">...</div>
    </div>
</div>

But my current code places all image-div elements into the very first #slide div, instead of sorting them into three different #slide divs based on where they’re nested in the xml file. I’m actually able to get it working properly with document.write, but that’s not ideal for obvious reasons, since it erases my css too.

Append is the only way I know of the generate html from my xml file and still use a separate stylesheet to add styling. Any help would this would be much appreciated.

Answer 1

Tobias is right, you can only use an ID once, however, your code is technically broke for another reason.

Your call…

$('#slide').append('<div class="image-div">

… doesn’t take into account the “current context”. When creating the slide (appending it), keep a reference to it to do a $object.append to it rather than using jquery to go fetch the element from the DOM again.

var $slide = $('<div id="slide">');
$('#timeline').append($slide);
....
$slide.append('<div class="image-div">')