Click here to Skip to main content
15,896,154 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
how can i parse a xml file with jquery and display the result using a html page.?
Posted
Comments
gaurish thakkar 3-Jul-12 7:57am    
I want to work in offline mode
Sergey Alexandrovich Kryukov 3-Jul-12 14:20pm    
How come you fail to see the parser in jQuery, which could be found in seconds? How come you formally accepted quite bad Solution 2? Right one is Solution 1.
--SA

http://api.jquery.com/jQuery.parseXML/[^]


please check this link it will help you i hope
 
Share this answer
 
Comments
Sergey Alexandrovich Kryukov 3-Jul-12 14:18pm    
Somebody voted "5" for Solution 2 (srnr), which is nothing good, and "3" for this solution. This is wrong, even stupid. I vote "5" for this one.
--SA
kimberly wind 4-Jul-12 0:40am    
Thanks for supporting good answer
Sample XML file

XML
<?xml version="1.0" encoding="utf-8" ?>
<RecentBooks>
  <Book>
    <Title>My Cool Book Title</Title>
    <Description>The my cool book is possibly the best cool book in that any developer could use to be a great web designer.</Description>
    <Date>12/1/2010</Date>
  </Book>
  <Book>
    <Title>Another PHP book</Title>
    <Description>Learn everything about PHP with 'Another PHP book,' your ultimate guide to the ins and outs of PHP.</Description>
    <Date>4/1/2010</Date>
  </Book>
  <Book>
    <Title>jQuery Techniques</Title>
    <Description>jQuery techniques runs you through real life examples of jQuery from beginner to expert</Description>
    <Date>6/2/2010</Date>
  </Book>
  <Book>
    <Title>MySQL Database Book</Title>
    <Description>Brush up your knowledge with the best MySQL database book on the market.</Description>
    <Date>14/2/2010</Date>
  </Book>
</RecentBooks>



Java Script
JavaScript
$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "books.xml",
        dataType: "xml",
        success: xmlParser
    });
});
 
function xmlParser(xml) {
 
    $('#load').fadeOut();
 
    $(xml).find("Book").each(function () {
 
        $(".main").append('<div class="book"><div class="title">' + $(this).find("Title").text() + '</div><div class="description">' + $(this).find("Description").text() + '</div><div class="date">Published ' + $(this).find("Date").text() + '</div></div>');
        $(".book").fadeIn(1000);
 
    });
 
}


HTML
XML
<div class="main">
<div align="center" class="loader"><img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/></div>
</div>

<div class="clear"></div>
 
Share this answer
 
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900