Parse XML doc using jQuery and link to fields in the XML
Hi,
jQuery is still fairly new to me, so I apologize if I sound like a noob. I'm trying to parse an XML doc and return the values in to an HTML page. I can parse the XML (in all browsers but IE which is another bridge to cross) but I now need to identify each fund in the javascript by the <acronym> tag and add a unique URL to it's corresponding <fundname> in the XML once it has been parsed. The links need to live in the javascript unfortunately. Here is my code:
HTML
<html>
<head>
<title>JQuery Easy XML Read Example</title>
script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="readXML.js"></script>
</head>
<body>
<div id="ContentArea"></div>
</body>
</html>
readXML.js
// File: readXML.js
// Start function when DOM has completely loaded
$(document).ready(function(){
// Open the composites.xml file
$.get("composites.xml",{},function(xml){
// Build an HTML string
myHTMLOutput = '';
myHTMLOutput += '<table width="98%" border="1" cellpadding="0" cellspacing="0">';
myHTMLOutput += '<th>Acronym</th><th>Fund Name</th>';
// Run the function for each fund in the XML file
$('gipsreport',xml).each(function(i) {
gipsreportAcronym = $(this).find("acronym").text();
gipsreportFundname = $(this).find("fundname").text();
gipsreportPost = $(this).find("acronym").attr("post");
// Build row HTML data and store in string
mydata = BuildGipsHTML(gipsreportAcronym,gipsreportFundname,gipsreportPost);
myHTMLOutput = myHTMLOutput + mydata;
});
myHTMLOutput += '</table>';
// Update the DIV called Content Area with the HTML string
$("#ContentArea").append(myHTMLOutput);
});
});
function BuildGipsHTML(gipsreportAcronym,gipsreportFundname,gipsreportSE){
// Check to see if their is a "post" attribute in the name field
if ((gipsreportPost) != undefined){
gipsreportPostHTML = "<strong>(" + gipsreportPost + ")</strong>";
}
else
{
gipsreportPostHTML = "";
}
Thanks. I can parse the XML no problem (even in IE now). My issue is identifying each <acronym> tag and add applying a URL to it's corresponding <fundname> in the XML once it has been parsed.
And, here's the new script I'm using the works in IE in case anyone else can use it if you're not applying URLs:
function parse(document){
$(document).find("gipsreport").each(function(){
$("#content").append(
'<p>Acronym: '+$(this).find('acronym').text()+
'<br /> Fund Name: '+$(this).find('fundname').text()+
'</p>'
);
});
}
$.ajax({
url: 'composites.xml', // name of file you want to parse
dataType: "xml",
success: parse,
error: function(){alert("Error: Something went wrong");}
});
});
</script>
Reply With Quote
Bookmarks