Selecting Elements at Runtime to Display using XSL
Hi,
My requirement is to choose the elements dynamically using javascript which listed in the drop down and send the set of node list as parameter (or some other way), to an xsl file and then select the value-of those nodes. This selection every time changes and number of nodes also changes. I have tried in a way as shown below which is working copy. But the number of nodes within the specified range. The below xsl shows only 5elements max selection or <5.
JavaScript:
//Loads the Elements to the Drop Down in OnLoad Event
function loadCols()
{
var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
xmlDom.async=false;
xmlDom.load("Inventry.xml");
var xmlNodLst = xmlDom.documentElement.firstChild;
var i=0;
var cols = document.all("ddlColumns");
while(xmlNodLst!=null)
{
cols[i] = new Option(xmlNodLst.childNodes[i].nodeName,xmlNodLst.childNodes[i].nodeName);
i++;
}
}
// After user has been selected the list of elements(multiple selection), this function
//will be invoked using the button_onclick
function loadXmlXsl(){
var cols = document.all("ddlColumns");
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("Inventry.xml");
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
var xsldoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0" );
xsldoc.async = false;
xsldoc.load('Inventry.xsl');
xslt.stylesheet = xsldoc;
xsl.async = false
xsl.load("Inventry.xsl")
xslt.stylesheet = xsldoc;
var xslproc = xslt.createProcessor();
xslproc.input = xml;
//The selected elements adding as parameters
//tmpC1,tmpC2,... maintained as generic name var i=0;
while(cols.selectedIndex != -1)
{
if(cols.selectedIndex >= 0)
{
xslproc.addParameter("tmpC" + ++i ,cols.options[cols.selectedIndex].value);
//alert(cols.options[cols.selectedIndex].value);
}
cols.options[cols.selectedIndex].selected = false;
}
xslproc.transform();
divXml.innerHTML = xslproc.output;
}
Html:
....
<body onload="loadCols();">
<form id="form1" runat="server">
<div>
<table border="1">
<tr>
<td>
<select id="ddlColumns" name="ddlColumns" multiple size="5">
</select>
</td>
<td>
<input id="Button1" type="button" value="button" onclick="loadXmlXsl();"/>
</td></tr>
</table>
</div>
<div id="divXml">
</div>
.....
Xsl:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:fx="#fx-functions" exclude-result-prefixes="msxsl fx">
<xsl:output method="html" version="4.0" indent="yes" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"/>
<xsl:param name="tmpC1"/>
<xsl:param name="tmpC2"/>
<xsl:param name="tmpC3"/>
<xsl:param name="tmpC4"/>
<xsl:param name="tmpC5"/>
<xsl:template match="dataroot" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<table border="1">
<tr style="color: #ffffff; background-color: #333399">
<xsl:if test="string($tmpC1)">
<td>
<xsl:value-of select="$tmpC1"/>
</td>
</xsl:if>
<xsl:if test="string($tmpC2)">
<td>
<xsl:value-of select="$tmpC2"/>
</td>
</xsl:if>
<xsl:if test="string($tmpC3)">
<td>
<xsl:value-of select="$tmpC3"/>
</td>
</xsl:if>
<xsl:if test="string($tmpC4)">
<td>
<xsl:value-of select="$tmpC4"/>
</td>
</xsl:if>
<xsl:if test="string($tmpC5)">
<td>
<xsl:value-of select="$tmpC5"/>
</td>
</xsl:if>
</tr>
<tr>
<xsl:variable name="node" select="concat('$','tmpC',$inc)"/>
<xsl:for-each select="Inventry[Country=$ctry and *[local-name()=$col1]=$iMon and Product=$prdt]">
<xsl:if test="string($tmpC1)">
<td>
<xsl:value-of select="*[local-name()=$tmpC1]"/>
</td>
</xsl:if>
<xsl:if test="string($tmpC2)">
<td>
<xsl:value-of select="*[local-name()=$tmpC2]"/>
</td>
</xsl:if>
<xsl:if test="string($tmpC3)">
<td>
<xsl:value-of select="*[local-name()=$tmpC3]"/>
</td>
</xsl:if>
<xsl:if test="string($tmpC4)">
<td>
<xsl:value-of select="*[local-name()=$tmpC4]"/>
</td>
</xsl:if>
<xsl:if test="string($tmpC5)">
<td>
<xsl:value-of select="*[local-name()=$tmpC5]"/>
</td>
</xsl:if>
</xsl:for-each>
<td>
<SumQty>
<xsl:value-of select="sum($invoices/*/Invoice[translate(Date,'-','')= translate($iMon,'-','') and Country=$ctry and Product=$prdt]/InvQty)"/>
</SumQty>
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
I want "n" number of selection instead of only 5.
I have tried in other way, storing all selections into a nodeList and
sent as param to xsl. There i have used the recursive of nodes but I dont know how to make it workable. But it seems to be feasible. Pls help...! either this way or any other better solution to achieve this.
I spent lot of time in this.
Recursive method:
Here the "param" holds the selected elements, that value must act as node name in xsl. like;
<params>
<param>Month</param>
<param>Product</param>
...
</params>
invetry.xsl:
....
<xsl:param name="param"/>
....
<for-each ....> or <when....> Iteration to extract one by one like Month,Product....n
<xsl:value-of select="$param"/>
</for-each>
Must act as
<xsl:value-of select="Month"/> in next iteration,
<xsl:value-of select="Product"/>
....
Javascript:
.....
var xmlParam = new ActiveXObject("Microsoft.XMLDOM");
xmlParam.async = false;
var i=0;
var str= new String();
while(cols.selectedIndex != -1)
{
if(cols.selectedIndex >= 0)
{
str += "<param>" + cols.options[cols.selectedIndex].value + "</param>";
}
cols.options[cols.selectedIndex].selected = false;
}
xmlParam.loadXML("<params>" + str + "</params>");
var lstParam = xmlParam.documentElement;
xslproc.addParameter("param",lstParam);
xslproc.transform();
// Transform
divXml.innerHTML = xslproc.output;
.....
Xsl: (scrap code... not working)
....
<xsl:param name="param"/>
...
<xsl:template name="tmpParam" match="dataroot" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:choose>
<xsl:when test="$param">
<xsl:variable name="recursive_result">
<xsl:call-template name="tmpParam">
<xsl:with-param name="param" select="$param"/>
</xsl:call-template>
</xsl:variable>
<xsl:value-of select="param"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="param"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
....
Thanks in Advance!
vivek
__________________
vivek
|