Javascript allows you to access ActiveX Object types by their program id. This lets you initialized an XML activeX object from your javascript code(specific to IE5). Two Document Object Model (DOM) are used one to store the xml structure and the other to hold the Extended Style Sheet (XSL) object.
XML Structure
<products>
<item>
<brand>
Microsoft
</brand>
<title>
VISUAL BASIC PROFESSIONAL V6.0 WITH PLUS PACK
</title>
<image>vb6pp.jpg</image>
<price>
<![CDATA[$469.96]]>
</price>
<id>
13541.236538
</id>
</item>
</products>
In the XSL, I find the if criteria attribute and
replace its text with the brand type to be outputted
back to the client browser. We then use the transformNode
to put the output of the style sheet into a string variable.
I replace all < and > extended tags with < and > tags.
The Div tags Id [product_id] is used to insert the html stored in the strResult variable
into the div tag [product_table] space. The method that
allow html substitution is innerHTML. If text not html is to
be substituted use innerText.
<script language="javascript1.1" >
function loadXML(sType)
{
var strResult;
var doc=new ActiveXObject("microsoft.xmldom");
var sBrand;
doc.async=false;
doc.load("software.xml");
var styleSheet=new ActiveXObject("microsoft.xmldom");
styleSheet.async=false;
styleSheet.load("software.xsl");
var node=styleSheet.selectSingleNode("//xsl:if/@test");
sBrand="brand[.='"+sType+"']";
node.nodeValue=sBrand;
strResult = doc.transformNode(styleSheet);
strResult=replace(strResult,"<","<");
strResult=replace(strResult,">",">");
product_table.innerHTML=strResult;
}
function replace(stPhrase,stPattern,stInsert)
{
var stBuffer;
stArray=stPhrase.split(stPattern);
stBuffer="";
for (var i=0; i<stArray.length; i++)
{
if (i<stArray.length-1)
{
stBuffer+=stArray[i]+stInsert;
}
else
{
stBuffer+=stArray[i];
}
}
return stBuffer;
}
On the link click event javascript is run to execute the loadXML function which displays software products by brand. By returning false in the javascript onClick code the link does not jump to the url. The div tag identified as product_table is used as a place holder for the location of the html substitutions.
</script>
<body bgcolor="white" onLoad="loadXML('Microsoft');">
<font color="#b0e0e6" size="5">Software Selection</font><br>
<table width="600" border="1">
<tr>
<td width="200" valign="top">
<table width="100%">
<tr>
<td bgcolor="#b0e0e6"><font color="#ffffff">Brand</font></td>
</tr>
<tr>
<td>
<a id="microsoftlink" href="abc" onClick="loadXML 'Microsoft'); return false;">Microsoft</a><br>
<a id="calderalink" href="abc" onClick="loadXML('Caldera');return false;">Caldera</a><br>
<a id="redhatlink" href="abc" onClick="loadXML('Red Hat');return false;">Red Hat</a><br>
<a id="corellink" href="abc" onClick="loadXML('Corel');return false;">Corel</a><br>
</td>
</table>
</td>
<td>
<div id="product_table"></div>
<td>
</tr>
<table>
Comments