XSLT: Reuse a template within another template



I have an XSLT file which displays the title and artist name of a CD. I have 3 templates, first template displays the title, second template displays the artist name, and third template contains a hidden table. The hidden table is displayed using a checkbox. I want to reuse the title and artist templates in order to show them as table data inside the third template when it is visible.


The problem is that the third template doesn't show on the browser because I don't know what to assign to the match attribute. Any help is highly appreciated. Thanks.


a busy cat ![two muppets][1] index.html



<html>
<head>
<script>
function loadXMLDoc(filename)
{
if (window.ActiveXObject)
{
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog_apply.xsl");
// 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();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>


cdcatalog.xml



<?xml version="1.0" encoding="UTF-8"?>

<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
</cd>
</catalog>


cdcatalog_apply.xsl



<xsl:stylesheet version="1.0" xmlns:xsl="http://ift.tt/tCZ8VR">

<xsl:template match="/">
<html>
<head>
<style type="text/css">

.pdesc{
display:none;
}

input[type=checkbox]:checked + .pdesc {
display: block;
}

</style>
</head>
<body>

<h1>CD Collection</h1>
<xsl:apply-templates select="catalog/cd">
</xsl:apply-templates>

</body>
</html>
</xsl:template>


<xsl:template match="cd">
<TR >
<xsl:apply-templates select="title"/>
<xsl:apply-templates select="artist"/>
</TR>
</xsl:template>


<xsl:template match="title" name="title">
<p>
<xsl:value-of select="."/>
</p>
</xsl:template>


<xsl:template match="artist" name="artist">
<p>
<xsl:value-of select="."/>
</p>
</xsl:template>

<xsl:template match="X"><!-- I don't know what to put in the match -->
<label >Show More</label>
<input type="checkbox" ></input>

<div class="pdesc">

<h2>CD Details</h2>

<table border="1" >
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
<tr>
<td> <xsl:call-template name="title"/></td>
<td> <xsl:call-template name="artist"/></td>
</tr>

</tr>
</table>

</div>
</xsl:template>


</xsl:stylesheet>

No comments:

Post a Comment