Pages

10 Aug 2013

Read XML file with jQuery

<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="CSS Mastery" imageurl="images/css.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Professional ASP.NET" imageurl="images/asp.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Learning jQuery" imageurl="images/lj.jpg">
    <description>
    info goes here.
    </description>
    </book>
</books>


$(document).ready(function()
      {
        $.get('myData.xml', function(d){
        $('body').append('<h1> Recommended Web Development Books </h1>');
        $('body').append('<dl>');
 
        $(d).find('book').each(function(){
 
            var $book = $(this);  
            var title = $book.attr("title");
            var description = $book.find('description').text();
            var imageurl = $book.attr('imageurl');
 
            var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
            html += '<dd> <span class="loadingPic" alt="Loading" />';
            html += '<p class="title">' + title + '</p>';
            html += '<p> ' + description + '</p>' ;
            html += '</dd>';
 
            $('dl').append($(html));
             
            $('.loadingPic').fadeOut(1400);
        });
    });
});



No comments:

Post a Comment