Re: javascript in XSL

Mon, 16 Aug 2004 08:05:29 -0700

Didn't method 1) work? It used it many times and it works for me. I just had to take care of IE, which does not detect the /> at the end of <script> element and swallows everything up to the end of the page:

<script type="text/javascript" language="JavaScript" src="tree.js">var thisGetsIgnoredButdoNotRemove;</script>

--
Olivier

Siaw Ling Lo wrote:

hi,

I am using cocoon2 and trying to build a tree that can
collapse and expand when click.

I tried various methods in getting the javascript to
work with XSL to display an XML but it just can't work
- error: org.apache.cocoon.ProcessingException: Failed
to execute pipeline.: java.lang.RuntimeException:
java.lang.NullPointerException .

The methods I tried including
1. <script type="text/javascript" src="tree.js" /> in
html-head

2. embedding :
<script type="text/javascript">
<xsl:comment>
<![CDATA[ xxxxx
]]>
</xsl:comment>
</script>

below are the XSL file with the 2nd approach and
corresponding XML file.
=================================================
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform>

<xsl:template match="tree">
<html>
<head>
<script type="text/javascript">
<xsl:comment>
<![CDATA[ function clickOnEntity(entity) {
if(entity.open == "false") {
expand(entity, true)
}
else {
collapse(entity)
}
window.event.cancelBubble = true
}

function expand(entity) {
 var oImage

 oImage = entity.childNodes(0).all["image"]
 oImage.src = entity.imageOpen

 for(i=0; i < entity.childNodes.length; i++) {
   if(entity.childNodes(i).tagName == "DIV") {
     entity.childNodes(i).style.display = "block"
   }
 }
 entity.open = "true"
}

function collapse(entity) {
 var oImage
 var i

 oImage = entity.childNodes(0).all["image"]
 oImage.src = entity.image

 // collapse and hide children
 for(i=0; i < entity.childNodes.length; i++) {
     if(entity.childNodes(i).tagName == "DIV") {
       if(entity.id != "folderTree")
entity.childNodes(i).style.display = "none"
       collapse(entity.childNodes(i))
     }
   }
 entity.open = "false"
}

function expandAll(entity) {
 var oImage
 var i

 expand(entity, false)

 // expand children
 for(i=0; i < entity.childNodes.length; i++) {
   if(entity.childNodes(i).tagName == "DIV") {
     expandAll(entity.childNodes(i))
   }
 }
}
                   ]]>
       </xsl:comment>
</script>
</head>
<body>
 <xsl:apply-templates select="entity"/>
</body>
</html>
</xsl:template>

<xsl:template match="entity">
 <div onclick="window.event.cancelBubble =
true;clickOnEntity(this);" onselectstart="return
false" ondragstart="return false">
 <xsl:attribute name="image"><xsl:value-of
select="image"/></xsl:attribute>
 <xsl:attribute name="imageOpen"><xsl:value-of
select="imageOpen"/></xsl:attribute>
 <xsl:attribute name="open">false</xsl:attribute>
 <xsl:attribute name="id">f<xsl:value-of
select="@id"/></xsl:attribute>
 <xsl:attribute name="open">false</xsl:attribute>
 <xsl:attribute name="STYLE">
   padding-left: 20px;
   cursor: hand;
   <xsl:if expr="depth(this) > 2">
     display: none;
   </xsl:if>
 </xsl:attribute>
   <table border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td valign="middle">
         <img border="0" id="image">
           <xsl:attribute name="SRC">
             <xsl:value-of select="image"/>
           </xsl:attribute>
         </img>
       </td>
       <td valign="middle" nowrap="true">
       <xsl:attribute name="STYLE">
         padding-left: 7px;
         font-family: Verdana;
         font-size: 11px;
         font-color: black;
       </xsl:attribute>
       <xsl:value-of select="description"/></td>
     </tr>
   </table>
 <xsl:apply-templates select="contents/entity"/>
 </div>
</xsl:template>

</xsl:stylesheet>

and the corresponding XML file:
=================================
<?xml version="1.0"?>
<tree>
 <entity id="e12">
   <description>Reports</description>
   <oncontextmenu></oncontextmenu>
   <image>images/book.gif</image>
   <imageOpen>images/bookOpen.gif</imageOpen>
   <contents>
     <entity id="e13">
       <description>Income</description>
       <oncontextmenu></oncontextmenu>
       <image>images/paper.gif</image>
       <imageOpen>images/paper.gif</imageOpen>
       <contents>
       </contents>
     </entity>
     <entity id="e14">
       <description>Expenses</description>
       <oncontextmenu></oncontextmenu>
       <image>images/paper.gif</image>
       <imageOpen>images/paper.gif</imageOpen>
       <contents>
       </contents>
     </entity>
   </contents>
 </entity>
</tree>

Thank you very much for any guidance and advice.

SiawLing



---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]

Reply via email to