Combining Javascript and DOM

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 &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.


</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="caldera
link" 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="corel
link" href="abc" onClick="loadXML('Corel');return false;">Corel</a><br>
               </td>
       </table>
   </td>
   <td>
       <div id="product_table"></div>
   <td>
</tr>
<table>

You might also like...

Comments

David Nishimoto NishiSoft provides Part I of the Information Technology Project collaboration. Sign up and list your IT project tasks, assign task too friends, and get percent complete task. Part will include a wo...

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“The trouble with programmers is that you can never tell what a programmer is doing until it's too late.” - Seymour Cray