Library code snippets

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="microsoft_link" 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="redhat_link" 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>

Comments

  1. 01 Jan 1999 at 00:00

    This thread is for discussions of Combining Javascript and DOM.

Leave a comment

Sign in or Join us (it's free).

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

Related podcasts

  • The Future of .NET Dotfuscator with Gabriel Torok

    Keith and Woody sat down with PreEmptive President Gabriel Torok to discuss the news that Microsoft is including PreEmptive's Dotfuscator Community Edition in Visual Studio 2010. The guys also discussed how Dotfuscator can be used to assist with Feature Monitoring, Usage Expiry, and Tamper ...

Events coming up

  • Dec 15

    Portland Java User Group

    Portland, United States

    This month's topic: TBD----------PJUG meetings start with eat+meet+greet time (pizza and beverages are provided), followed by the featured speaker, then some time for Q&A, discussion, and sometimes a drawing to give away swag. :)It is...

We'd love to hear what you think! Submit ideas or give us feedback