You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@cocoon.apache.org by Siaw Ling Lo <si...@yahoo.com> on 2004/08/16 13:29:13 UTC
javascript in XSL
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
__________________________________
Do you Yahoo!?
New and Improved Yahoo! Mail - Send 10MB messages!
http://promotions.yahoo.com/new_mail
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@cocoon.apache.org
For additional commands, e-mail: users-help@cocoon.apache.org
Re: javascript in XSL
Posted by Olivier Lange <wi...@petit-atelier.ch>.
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: users-unsubscribe@cocoon.apache.org
For additional commands, e-mail: users-help@cocoon.apache.org
Re: javascript in XSL
Posted by KOZLOV Roman <ro...@opencascade.com>.
Hi,
What is your pipeline for this? Check it.
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
>
>
> __________________________________
> Do you Yahoo!?
> New and Improved Yahoo! Mail - Send 10MB messages!
> http://promotions.yahoo.com/new_mail
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@cocoon.apache.org
> For additional commands, e-mail: users-help@cocoon.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@cocoon.apache.org
For additional commands, e-mail: users-help@cocoon.apache.org