CODEWITHSUNDEEP
jqueryxmlappend
lolo
lolo

Reputation: 237

jquery append xml data

I used jquery isotope to display my portfolio. I want to load all isotope item thanks to an xml file.

I tried to append isotope element with jquery and xml data.

My script looks like to this :

$(document).ready(function()
  {
$.get('data.xml', function (d) {

    $(d).find('element').each(function () {
        var $element = $(this);
        var id = $element.attr("id");
        var size = $element.attr("size");
        var category = $element.attr("category");
        var urlpage = $element.find('urlpage').text();
        var urlimage = $element.find('urlimage').text();
        var title = $element.find('title').text();

$('<div class= " element '+ size +' '+ category +' " id="_'+id+'"></div>').html('<a class= "link" href="' + urlpage + '"><img  src="' + urlimage + '" class="thumbnail" />' + '<div>' + '<span>' + + '<span>' + '<i class="icon-pencil"></i>' + '&nbsp;&nbsp;' + title + '</span><span class="more">more.</span></div></a></div>').appendTo('#container');


});

$container.isotope({
    itemSelector : '.element',
    layoutMode: 'masonryHorizontal',
    masonryHorizontal: {
    rowHeight: 210
    },
});

});
});

And my xml like this:

<?xml version="1.0" encoding="utf-8" ?>

<element>
    <element id="13" size="" category="portfolio">
    <urlpage>/portfolio/dock.html</urlpage>
    <urlimage>./Post thumbnail images/formlabs.jpg</urlimage>
    <title>Formlabs : An offordable 3D printer on kickstarter</title>
</element>

<element>
    <element id="12" size="" category="portfolio">
    <urlpage>/portfolio/dock.html</urlpage>
    <urlimage>./Post thumbnail images/Bumper.JPG</urlimage>
    <title>Minimal Bumper for iPhone 5</title>
</element>

But nothing happens....I think I have a mistake in my script....

What's wrong?

Sorry for my Englis, I'm French.

Upvotes: 0

Views: 682

Answers (1)

Kaloyan
Kaloyan

Reputation: 7352

Your XML is invalid. You have an element and inside it you have another one which is not closed. Additionally all your tags must be inside a root tag (for example elements).

Why don't you do it like this:

<?xml version="1.0" encoding="utf-8" ?>
<elements>
<element id="13" size="" category="portfolio">
    <urlpage>/portfolio/dock.html</urlpage>
    <urlimage>./Post thumbnail images/formlabs.jpg</urlimage>
    <title>Formlabs : An offordable 3D printer on kickstarter</title>
</element>

<element id="12" size="" category="portfolio">
    <urlpage>/portfolio/dock.html</urlpage>
    <urlimage>./Post thumbnail images/Bumper.JPG</urlimage>
    <title>Minimal Bumper for iPhone 5</title>
</element>
</elements>

Upvotes: 1

Related Questions