Xml transformations to xhtml not working

Posted on 2014-08-23
Last Modified: 2014-09-15
Dear Experts,

I am able to display the grid of products from xml in XHTML. But i am struck in displaying the details of particular product when it is clicked. Since i am new to xml concept, can someone help in the syntax please ?

Question by:codeoxygen
    1 Comment
    LVL 11

    Accepted Solution

    Couple of things:

    1. you need to have an unique ID of some sort in your XML data to identify each pet
    2. you need to modify your XSL to use the unique ID so that each record in the initial display table is identifiable
    3. you need to have a click function on the page to dictate which pet's details you wish to display in the main box

    So, I modified your XML adding the ID tag and a unique value per record and I also changed the data as both records of data were identical which makes testing a little tricky!
    I modified the XSL to put the ID value on each record and I added a class to make the table row identifiable for the click function.
    I modified the script adding jQuery, and moving the XML load variables outside the functions to make them global
    Now when you click on a row of the initial table it captures the ID value, finds the XML record that matches that ID and returns the corresponding data fields
    <?xml version="1.0" encoding="utf-8"?>
    			<Botanical>Smallus Dogus Jacksonium</Botanical>
    		<Breed>West Highland Terrier</Breed>
    		<Age>Adult 3yr</Age>
    			<Botanical>Sub Groundium Treasury</Botanical>
    		<Age>Adult 2yr</Age>

    Open in new window

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!-- Edited by XMLSpy® -->
    <xsl:stylesheet version="1.0"
    <xsl:template match="/">
    	<table border="1">
    		<tr bgcolor="#9acd32">
    	<xsl:for-each select="pets/pet">
    		<tr id="{id}" class="pet">
    			<td><xsl:value-of select="Name/Common" /></td>
    			<td><img src="{Image}" /></td>

    Open in new window

    	<script type="text/javascript" src=""></script>
    		$(document).ready(function() {
    			//	load XML data and style
    			var xml = loadXMLDoc("newxml.xml");
    			var xsl = loadXMLDoc("newxml.xsl");
    			//	display initial table of data
    			function loadXMLDoc(filename)
    				if (window.ActiveXObject)
    					xhttp = new ActiveXObject("Msxml2.XMLHTTP");
    				else {
    					xhttp = new XMLHttpRequest();
    		"GET", filename, false);
    				try {
    					xhttp.responseType = "msxml-document"
    				} catch(err) {} // Helping IE11
    				return xhttp.responseXML;
    			function displayResult()
    				// code for IE
    				if (window.ActiveXObject || xhttp.responseType == "msxml-document")
    					ex = xml.transformNode(xsl);
    					document.getElementById("example").innerHTML = ex;
    				// code for Chrome, Firefox, Opera, etc.
    				else if (document.implementation && document.implementation.createDocument)
    					xsltProcessor = new XSLTProcessor();
    					resultDocument = xsltProcessor.transformToFragment(xml, document);
    			// react to click of table row with a class of pet
    				//	get the ID value of the clicked row
    				var thisID = $(this).attr('id');
    				//	find the corresponding data block in the XML source
    				myXML = $(xml).find("pet").filter(function() {
    					//	gets only elements relating to button ID clicked
    					return $(this).find('id').text() == thisID;
    				// build the output data plating tags and values in separate columns
    				var display = myXML.children().map(function() {
    					return '<tr><td>' + this.tagName + '</td><td>' + $(this).text() + '</td></tr>';
    				}).get().join(' ');
    				//	top & tail the table tags
    				var output = "<table>" + display + "</table>";
    				//	send the output data to the display DIV
    				$( "#details" ).html( output );
    				//	apply a style to the display DIV
    				$( "#details" ).css('border','1px solid #333');
    	<div id="example"> </div>
    	<div id="blank">&nbsp;</div>
    	<div id="details"> </div>

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now