안녕하세요~ .xslt 관련 질문 드립니다.
index.html 에서 특정 버스번호(routes) 를 입력 하고 그 버스의 관련된 정보를 .xml 통해서 불러 오려고 합니다.
예를들어, 23 을 입력하면 23번 버스가 멈추는 정거장 번호와 이름등을 화면에 나타나게 하는건데요,
아무것도 입력 안하고, 버튼을 누르면 전체 정보가 뜨는데 특정 버스번호(routes)를 입력하면 인식이 안되고 그대로 전체정보가 뜹니다.
.xslt 파일에서 뭔가가 틀리게 한거 같은데 도무지 감이 안오네요 ㅠㅠ
1) index.html
<html lang="en" xmlns="
http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
h1
{
font-family: Verdana;
font-size: 24pt;
}
h2
{
font-family: Verdana;
font-size: 18pt;
}
input, button
{
font-family: Verdana;
font-size: 14pt;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
<title>LTC Bus stops</title>
</head>
<body>
<h2>Enter an LTC route number (or leave empty) and click 'Update'</h2>
<input type="text" id="routesInput" />
<input type="submit" value="Update" onclick="RenderXSLT()" />
<!-- This is the container that will contain the output from the xslt style sheet -->
<div id="xsltOutputContainer"></div>
<script type="text/javascript">
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) { }
xhttp.send("");
return xhttp.responseXML;
}
function RenderXSLT()
{
xml = loadXMLDoc("ltcstops.xml");
xslt = loadXMLDoc("ltcstops.xslt");
var routesNum = document.getElementById("routesInput").value;
routesNum = routesNum.toString();
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
{
// This code is for Internet Explorer
var template = new ActiveXObject("Msxml2.XslTemplate.6.0");
template.stylesheet = xslt;
var proc = template.createProcessor();
proc.input = xml;
proc.addParameter("routesNumber", routesNum);
proc.transform();
document.getElementById("xsltOutputContainer").innerHTML = proc.output;
}
else if (typeof XSLTProcessor !== 'undefined')
{
// This code is for other browsers
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
xsltProcessor.setParameter(null, "routesNumber", routesNum);
var resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("xsltOutputContainer").innerHTML = "";
document.getElementById("xsltOutputContainer").appendChild(resultDocument);
}
}
</script>
</body>
</html>
2) .xslt
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="
http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
<xsl:output method="html" indent="yes"/>
<!-- This is a parameter that is assigned a value by the JavaScript function renderXSLT() -->
<xsl:param name="routesNumber" select="'15'" />
<!-- This is a variable at global scope that is assigned a value based on the 'routes' parameter -->
<xsl:template match="/">
<!-- There are no html and body elements generated here
because the output will be injected into an existing html
document called index.html which already has these tags. -->
<h1>
<font face="Verdana">
All LTC Stops <br></br><br></br> <xsl:value-of select="count(//stop[@number])"/> stops found
</font>
</h1>
<table style="width:720px" border="3">
<tr>
<th>
<font face="Verdana" size="4">Stop#</font>
</th>
<th>
<font face="Verdana" size="4">Stop Name</font>
</th>
<th>
<font face="Verdana" size="4">Latitude</font>
</th>
<th>
<font face="Verdana" size="4">Longitude</font>
</th>
<th>
<font face="Verdana" size="4">Routes</font>
</th>
</tr>
<xsl:apply-templates select="//allstops" />
</table>
</xsl:template>
<xsl:template match="allstops">
<xsl:for-each select="./stop[contains(routes, routesNumber)]">
<xsl:sort select="@number" data-type="number" order="ascending" />
<xsl:element name="tr">
<xsl:element name="td">
<xsl:value-of select="@number" />
</xsl:element>
<xsl:element name="td">
<xsl:value-of select="@name"/>
</xsl:element>
<xsl:element name="td">
<xsl:value-of select=".//latitude"/>
</xsl:element>
<xsl:element name="td">
<xsl:value-of select=".//longitude"/>
</xsl:element>
<xsl:element name="td">
<xsl:value-of select=".//routes"/>
</xsl:element>
</xsl:element>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
3) .xml
<?xml version="1.0" encoding="UTF-8"?>
<!-- Source:
www.london.ca/d.aspx?s=/Open_Data/default.htm Date Accessed: March 19, 2013 -->
<allstops>
<stop number="2504" name="Main & Bainard EB">
<location>
<latitude>42.91033567</latitude>
<longitude>-81.29671483</longitude>
</location>
<routes>28</routes>
</stop>
<stop number="20" name="Adelaide & Ada NB">
<location>
<latitude>42.9742886</latitude>
<longitude>-81.2252341</longitude>
</location>
<routes>16</routes>
</stop>
<stop number="22" name="Adelaide & Central Ave NB">
<location>
<latitude>42.9945666</latitude>
<longitude>-81.2343441</longitude>
</location>
<routes>16</routes>
</stop>
