jquery append xml data

Question

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.

Kaloyan · Accepted Answer · 2013-04-01 23:20:17Z

1

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>

answered Apr 1, 2013 at 23:20

Kaloyan

7,3324 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lolo Over a year ago

Thank you. I saw this jsut 2min ago... Now my appended elements works. However, if I append inside my isotope container (#container) nothing happens... If I append in another non isotope container it works.

lolo Over a year ago

I success to append elements to container. But Isotope call back is not working...

lolo Over a year ago

Ok i Find with this : $container.isotope( 'insert', $('<div class= " element '+ size + category +' " id="_'+id+'"></div>').html('<a class= "link" href="' + urlpage + '"><img src="' + urlimage + '" class="thumbnail" />' + '<div>' + '<span>' + '<i class="icon-pencil"></i>' + '  ' + title + '</span><span class="more">more.</span></div></a></div>'))

Collectives™ on Stack Overflow

jquery append xml data

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related