<--- --------------------------------------------------------------------------------------- ----
Blog Entry:
jQuery Demo: Working With XML Documents
Code Snippet:
2
Author:
Ben Nadel / Kinky Solutions
Link:
http://www.bennadel.com/index.cfm?dax=blog:1054.view
Date Posted:
Nov 27, 2007 at 7:05 AM
---- --------------------------------------------------------------------------------------- --->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery Demo: Using jQuery With XML</title>
<!-- Linked files. -->
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript">
// This function will handle the xml Onload event
// handler. It will be passed the XML data object
// and the status of the XmlHttpRequest object.
function XmlOnLoad( xmlData, strStatus ){
// Let's start out by converting the XML data
// returned by the AJAX request into a jQuery
// XML document object model.
var jData = $( xmlData );
// Get the person object (but only if it is a girl).
var jGirl = jData.find( "person[ type = 'girl' ]");
// Get the direct children of the girl. These
// will represent the sections of the body.
var jSections = jGirl.children();
// For each of the section, we want to create
// an element in the girl definition list. Get a
// pointer to said definition list.
var jList = $( "#girl" );
// For each section, create a list item.
jSections.each(
function( intSectionIndex ){
var jSection = $( this );
var jTerm = $( "<dt></dt>" );
// Set the term text.
jTerm.text( jSection[ 0 ].nodeName );
// Append term to list.
jList.append( jTerm );
// Now, for each part of the section, we are
// going to need to create a list.
jSection.children().each(
function( intPartIndex ){
var jPart = $( this );
var jDef = $( "<dd></dd>" );
// Set the DD text.
jDef.text(
" - " +
jPart[ 0 ].nodeName + ": " +
jPart.attr( "value" )
);
// Append to list.
jList.append( jDef );
}
);
}
);
}
// When the document has loaded, request the girl
// XML object which will then use to populate the
// XHTML document.
$(
function(){
$.get(
"girl.xml.cfm",
{},
XmlOnLoad
);
}
);
</script>
</head>
<body>
<h1>
jQuery Demo: Using jQuery With XML
</h1>
<dl id="girl"></dl>
</body>
</html>
