i'm working with XML, XSLT, HTML, and javascript.
the xml document i'm using has this format:
<allstops>
<stop number="2504" name="Main & Bainard EB">
<location>
<latitude>42.91033567</latitude>
<longitude>-81.29671483</longitude>
</location>
<routes>28</routes>
</stop>
with many instances of an identical structure to the above.
I am using an html file to accept user input:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>enter the LTC route number you are interested in and click Update to see stops on that route</h2>
<h3>leave field blank and click Update to see all stops</h3>
<!--form elements-->
<input type="text" id="userInput"/>
<input type="submit" value="Update" onclick="RenderXSLT()"/>
<!--create the div that will contain the xslt output-->
<div id="xsltOutput"></div>
<!--inline script-->
<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("busStops.xslt");
var input = document.getElementById("userInput").value;
input = input.toLowerCase();
//add leading 0 on single digit
if (input.length == 1)
{
input = "0" + input;
}
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("route", input);
proc.transform();
document.getElementById("xsltOutput").innerHTML = proc.output;
}
else if (typeof XSLTProcessor !== 'undefined') {
// This code is for other browsers
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
xsltProcessor.setParameter(null, "route", input);
var resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("xsltOutput").innerHTML = "";
document.getElementById("xsltOutput").appendChild(resultDocument);
}
}
</script>
and the following is my 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"/>
<xsl:param name="route" select="routes"/>
<xsl:template match="/">
<h1 id="header">
There are <xsl:value-of select="count(//stop[contains(routes, $route)])"></xsl:value-of> stops on route #<xsl:value-of select="$route"></xsl:value-of>
</h1>
<table border="1">
<tr>
<th style="text-align:left">Stop #</th>
<th style="text-align:left">Stop name</th>
<th style="text-align:left">Latitude</th>
<th style="text-align:left">Longitude</th>
<th style="text-align:left">Routes</th>
</tr>
<xsl:apply-templates select=".//stop[contains(./routes, $route)]">
<xsl:sort select="./@number" data-type="number" order="ascending"/>
</xsl:apply-templates>
</table>
</xsl:template>
<xsl:template match="stop">
<tr>
<td>
<xsl:value-of select="@number"/>
</td>
<td>
<xsl:value-of select="@name"/>
</td>
<td>
<xsl:value-of select="location/latitude"/>
</td>
<td>
<xsl:value-of select="location/longitude"/>
</td>
<td>
<xsl:value-of select="routes"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
The purpose of this exercise is to accept the user input to search the XML for a particular route number, and then display information about that route to a table. My code currently does the bulk of the work - I can successfully find the route with my XSLT template and I have added a small piece of code to ensure that the user input cannot confuse the XSLT contains() by user input of a single digit.
I would like to be able to change the message in my header (which is generated in the XSLT) if the user leaves the field blank. Can anyone advise me on how to start changing my XSLT so that it will react differently if the input field is null?
Any advice appreciated. thank you in advance for your time and energy
