Menu
I am new to Jquery.I am trying to read data from "sampleXML.xml" file and display that data in Html "li" elements. so far I have done is, I have created html file as follows:file name-"Cloudtags.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src=Cloudtags.js></script>
<title>Css Globe: tag clouds</title>
<link rel="stylesheet" type="text/css" href="Cloudtags.css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="container">
<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
<div id="side">
<div class="tags">
<ul class="cld">
<li class="tag1" id="java"><a href="https://www.google.com">google</a></li>
<li class="tag2"><a href="#">Chiessy</a></li>
<li class="tag3"><a href="#">sitemap</a></li>
<li class="tag2"><a href="#">Sales</a></li>
<li class="tag4" ><a href="#">Gohome</a></li>
<li class="tag1"id="temp"><a href="#">Movies</a></li>
<li class="tag1"><a href="#">It Jobz</a></li>
<li class="tag5"><a href="#">Alza</a></li>
<li class="tag2"><a href="#">Sea food</a></li>
<li class="tag1"><a href="#">Hospital</a></li>
<li class="tag3"><a href="#">Smart phone</a></li>
<li class="tag4"><a href="#">Pizza </a></li>
<li class="tag1"><a href="#">Aerobics</a></li>
<li class="tag5"><a href="#">Yahoo...</a></li>
<li class="tag1"><a href="#">Anti-Virus</a></li>
<li class="tag2"><a href="#">Travel</a></li>
</ul>
</div>
</div>
<div id="xmldata"></div>
</div><br>
</body>
</html>
and this is my .js file:
$(document).ready(function() {
var nm;
$.ajax({
type: "GET" ,
url: "sampleXML.xml" ,
dataType: "xml" ,
success: function(xml) {
$(xml).find('person').each(function() {
nm= $(this).text()
$("#temp").html(nm);
}
}
});
});
My xml file is as follows:
<?xml version='1.0' ?>
<doc>
<person>
<name>sachin</name>
<age>21</age>
</person>
<person>
<name>Akash</name>
<age>18</age>
</person>
</doc>
But this does not work. Do I need to link some external file for "$.ajax" . So ,please tell me where I'm making mistake . . thanks in advance . .
378
jQuery can be used for XML processing on the Web as well as HTML processing, and in this article I show some examples of this use. In developing code examples for this article I downloaded the uncompressed bundle of jQuery 1.2. 1 and tested on Firefox 2.0. 0.7.
View an XML file in a browser If all you need to do is view the data in an XML file, you're in luck. Just about every browser can open an XML file. In Chrome, just open a new tab and drag the XML file over. Alternatively, right click on the XML file and hover over "Open with" then click "Chrome".
The simple way to insert XML code into an HTML file is to use the <xml> tag. The XML tag informs, the browser that the contents are to be parsed and interpreted using the XML parser. Like most other HTML tags, the <xml> tag has attributes.
I think you want like this, DEMO
var xmlDoc = $.parseXML( xml );
var $xml = $(xmlDoc);
var $person = $xml.find("person");
$person.each(function(){
var name = $(this).find('name').text(),
age = $(this).find('age').text();
$("#ProfileList" ).append('<li>' +name+ ' - ' +age+ '</li>');
});
Simply you can read XML file as dataType: "xml", it will retuen xml object already parsed. you can use it as jquery object and find anything or loop throw it…etc.
$(document).ready(function(){
$.ajax({
type: "GET" ,
url: "sampleXML.xml" ,
dataType: "xml" ,
success: function(xml) {
//var xmlDoc = $.parseXML( xml ); <------------------this line
//if single item
var person = $(xml).find('person').text();
//but if it's multible items then loop
$(xml).find('person').each(function(){
$("#temp").append('<li>' + $(this).text() + '</li>');
});
}
});
});
jQuery docs for parseXML
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
