New Topic/Question
Reply
Here is a link to my site: http://itweb.fvtc.ed...ect18/clist.htm
And here is my code:
HTML with javascript
<html>
<head>
<title>Contributors List</title>
<link href="clist.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="library.js"></script>
<script type="text/javascript">
var IE = window.ActiveXObject ? true : false;
var MOZ = document.implementation.createDocument ? true : false;
var XMLdoc; //source XML document
var XSLTdoc; //XSLT stylesheet document
var XSLTemp; //IE template document
var XSLTProc; //XSLT processor object
function loadDoc(docObj, url) {
docObj.async = false;
docObj.load(url);
}
function sortList() {
if (IE) {
XSLTdoc = new ActiveXObject(getPID(FreeThreadPID));
loadDoc(XSLTdoc, "clist.xsl");
var sortNode = XSLTdoc.getElementsByTagName("xsl:sort")[0]
}
else if (MOZ) {
var xNS = "http://www.w3.org/1999/XSL/Transform";
var sortNode = XSLTdoc.getElementsByTagNameNS(xNS, "sort")[0]
}
if (document.webform.sort[0].checked) select = "last_name";
else if (document.webform.sort[1].checked) select = "city";
else if (document.webform.sort[2].checked) select = "amount";
else select = "date";
if (document.webform.sort[2].checked) datatype = "number";
else datatype = "text"
if (document.webform.sort[0].checked) order = "ascending";
else order = "descending";
sortNode.setAttribute("select", select);
sortNode.setAttribute("data-type", datatype);
sortNode.setAttribute("order", order);
}
function filterList(XSLTProc) {
var filterStr = document.webform.filter.value;
if (filterStr == "") filter = "//person"
else filter = "//person[" + filterStr + "]";
if (IE) {
var xNodes = XMLdoc.selectNodes(filter);
XSLTProc.addParameter("group", xNodes);
}
}
function doTransform() {
var contTable = document.getElementById("ctable");
sortList(); //set the stylesheet sort options
if (IE) {
XSLTemp.stylesheet = XSLTdoc;
XSLTProc = XSLTemp.createProcessor();
XSLTProc.input = XMLdoc;
filterList(XSLTProc); // set the style sheet parameter value
XSLTProc.transform();
contTable.innerHTML = XSLTProc.output;
}
else if (MOZ) {
var XSLTProc = new XSLTProcessor();
XSLTProc.importStylesheet(XSLTdoc);
var Resultdoc = XSLTProc.transformToFragment(XMLdoc, document);
var Xserial = new XMLSerializer();
var Xstr = Xserial.serializeToString(Resultdoc);
contTable.innerHTML = Xstr;
}
}
function addRecord() {
var old = XMLdoc.getElementsByTagName("person")[0];
var clone = old.cloneNode(true);
removeWhiteSpaceNodes(clone);
for (i = 0; i <= 7; i++) {
clone.childNodes[i].firstChild.nodeValue = document.webform.elements[i].value;
}
XMLdoc.documentElement.appendChild(clone);
doTransform();
resetForm();
}
function init() {
if (IE) {
XMLdoc = new ActiveXObject(getPID(DOMPID));
XSLTdoc = new ActiveXObject(getPID(FreeThreadPID));
XSLTemp = new ActiveXObject(getPID(TemplatePID));
}
else if (MOZ) {
XMLdoc = document.implementation.createDocument("", "", null);
XSLTdoc = document.implementation.createDocument("", "", null);
}
loadDoc(XMLdoc, "clist.xml");
loadDoc(XSLTdoc, "clist.xsl");
doTransform();
}
</script>
</head>
<body onload="init()" >
<form name="webform" id="webform">
<div id="title">
<img src="logo.jpg" alt="The Lighthouse" />
The Lighthouse<br />
543 Oak Street<br />
Delphi, KY 89011<br/>
(542) 555-7511
</div>
<div id="data_entry">
<h3 style="margin-top: 0px">Enter a New Contributor</h3>
<table>
<tr>
<td>First Name</td>
<td><input name="name" id="first" size="20" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input name="last" id="last" size="20" /></td>
</tr>
<tr>
<td>Street</td><td>
<input name="street" id="street" size="30" /></td>
</tr>
<tr>
<td>City</td>
<td><input name="city" id="city" size="30" /></td>
</tr>
<tr>
<td>State</td>
<td><input name="state" id="state" size="2" /></td>
</tr>
<tr>
<td>Zip</td>
<td><input name="zip" id="fzip" size="5" /></td>
</tr>
<tr>
<td>Amount</td>
<td><input name="amount" id="famount" size="7" /></td>
</tr>
<tr>
<td>Date</td>
<td><input name="date" id="fdate" size="10" /></td>
</tr>
<tr>
<td colspan="2" class="buttoncell">
<input type="button" value="Add Contributor" onclick="addRecord()" />
<!--Additional AJAX Functionality->
<input id="btnSave" type="button" value="Save XML Data" name="btnSave" onclick="btnSave_onclick()"/>
<!--Additional AJAX Functionality-->
</td>
</tr>
</table>
<h3>Sort the Contributor List</h3>
<table>
<tr>
<td><input type="radio" name="sort" onclick="doTransform()" /></td>
<td>Last Name</td>
<td><input type="radio" name="sort" onclick="doTransform()" /></td>
<td>City</td>
</tr>
<tr>
<td><input type="radio" name="sort" onclick="doTransform()" /></td>
<td>Amount</td>
<td>
<input type="radio" name="sort" checked="checked" onclick="doTransform()" />
</td>
<td>Date</td>
</tr>
<tr>
<td colspan="4" class="buttoncell">
Ascending:
<input type="radio" name="order" onclick="doTransform()" />
Descending:
<input type="radio" name="order" checked="checked" onclick="doTransform()" />
</td>
</tr>
</table>
<h3>Filter the Contributor List</h3>
<table>
<tr>
<td>
<p>Text strings should be placed in single quotes.
Leave the input box blank to show all contributions.</p>
<p style="text-align: center">
<textarea name="filter" id="filter" rows="4" cols="14"></textarea><br />
<input type="button" value="Filter" onclick="doTransform()" />
</p>
</td>
</tr>
</table>
</div>
<div id="ctable">
</div>
</form>
</body>
</html>
XSLT
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version='1.0' xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" omit-xml-declaration="yes" />
<xsl:param name="group" select="//person" />
<xsl:template match="/">
<table width="370" cellspacing="0" cellpadding="2">
<tr>
<th colspan="3">Contributor List</th>
<th id="total">Total:
<xsl:value-of select="format-number(sum($group/amount),'$#,##0')" />
</th>
</tr>
<tr>
<th>Date</th>
<th>Name</th>
<th>Address</th>
<th>Amount</th>
</tr>
<xsl:apply-templates select="$group">
<xsl:sort select="last_name" data-type="text" order="descending" />
</xsl:apply-templates>
<xsl:apply-templates select="$group">
<xsl:sort select="city" data-type="text" order="descending" />
</xsl:apply-templates>
<xsl:apply-templates select="$group">
<xsl:sort select="amount" data-type="number" order="descending" />
</xsl:apply-templates>
<xsl:apply-templates select="$group">
<xsl:sort select="date" data-type="text" order="descending" />
</xsl:apply-templates>
<xsl:apply-templates select="$group">
<xsl:sort select="date" data-type="text" order="descending" />
</xsl:apply-templates>
<xsl:apply-templates select="$group">
<xsl:sort select="date" data-type="text" order="ascending" />
</xsl:apply-templates>
<xsl:apply-templates select="$group">
<xsl:sort select="date" data-type="text" order="descending" />
</xsl:apply-templates>
</table>
</xsl:template>
<xsl:template match="person">
<tr>
<td width="70"><xsl:value-of select="date" /></td>
<td width="100"><xsl:value-of select="last_name" />,
<xsl:value-of select="first_name" />
</td>
<td width="130">
<xsl:value-of select="street" /><br />
<xsl:value-of select="city" />,
<xsl:value-of select="state" />
<xsl:value-of select="zip" />
</td>
<td width="70" align="right">
<xsl:value-of select="format-number(amount,'$#,##0')" />
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
MultiQuote
| 