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

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 &lt; and &gt; 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,"<","&lt;");
   strResult=replace(strResult,">","&gt;");

   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.