Link to home
Start Free TrialLog in
Avatar of sabooraj
sabooraj

asked on

How to Call JavaScript from XSL with Examples

I am trying to call Javascript from XSL.I am infant to XML/XSL Tech.so please help me out.I had set Classpath of js.jar,xalan.jar and bsf.jar .I am using XML spy version 5 Rel .3 .

Hello.xml ::::::::
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="Hello.xsl"?>
<doc>
     <name first="David" last="Marston"/>
     <name first="David" last="Bertoni"/>
     <name first="Donald" last="Leslie"/>
     <name first="Emily" last="Farmer"/>
     <name first="Jack" last="Donohue"/>
     <name first="Myriam" last="Midy"/>
     <name first="Paul" last="Dick"/>
     <name first="Robert" last="Weir"/>
     <name first="Scott" last="Boag"/>
     <name first="Shane" last="Curcuru"/>
</doc>
::::::::::::::::::

Hello.xsl :::::::::::
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:xalan="http://xml.apache.org/xalan"
                xmlns:counter="MyCounter"
                extension-element-prefixes="counter"
                version="1.0">

  <xalan:component prefix="counter"
                   elements="init incr" functions="read">
    <xalan:script lang="javascript">
      var counters = new Array();

      function init (xslproc, elem) {
        name = elem.getAttribute ("name");
        value = parseInt(elem.getAttribute ("value"));
        counters[name] = value;
        return null;
      }

      function read (name) {
        // Return a string.
        return "" + (counters[name]);
      }

      function incr (xslproc, elem)
      {
        name = elem.getAttribute ("name");
        counters[name]++;
        return null;
      }
    </xalan:script>
  </xalan:component>

  <xsl:template match="/">
    <HTML>
      <H1>Names in alphatebical order</H1>
      <counter:init name="index" value="1"/>
      <xsl:for-each select="doc/name">
        <xsl:sort select="@last"/>
        <xsl:sort select="@first"/>
        <p>
        <xsl:text>[</xsl:text>
        <xsl:value-of select="counter:read('index')"/>
        <xsl:text>]. </xsl:text>
        <xsl:value-of select="@last"/>
        <xsl:text>, </xsl:text>
        <xsl:value-of select="@first"/>
        </p>
        <counter:incr name="index"/>
      </xsl:for-each>
    </HTML>
  </xsl:template>
 
</xsl:stylesheet>



::::::::::::::::::::



Error ::::::::::

Names in alphatebical order
The XML page cannot be displayed
Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later.


--------------------------------------------------------------------------------

Element 'counter:init' is not a recognized extension element.
 

:::::::::::::::::


so please help me out!!!!!!!!!!!!!!
Thanks Allot
Avatar of avner
avner
1. You cannot call javascript from within XSL. you can CALL javascript from the output of the XML/XSL .

2. The different parsers have different SPECIFIC extensions to allow calling a script at the time of the transformation, for example in MSXML :
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/htm/xsl_elm_qz_4s50.asp
Avatar of sabooraj
sabooraj

ASKER

I am using Java for XML/XSL Processing
Avatar of avner
avner
Then you cannot use Javascript. MSXML is the only browsers allows Javascript extension at transformation time.
Avatar of Zlatin Zlatev
Zlatin Zlatev
Flag of Bulgaria image
@avner, xalan also allows using scripts. Read the question carefully. Also as you have said it is specific, thus is not compatible with MS XML implementation, and may not be supported by XML Spy.

@sabooraj, are you sure you cannot achieve the desired result using pure xslt?
Why do you need the code in the XSLT stylesheet?
If you only need to add a counter to your XSL Transformation, then you can use named templates with parameters.

Kind Regards,
Zlatin Zlatev
Avatar of sabooraj
sabooraj

ASKER

@avner ,As Zlatev is saying very true that XALAN is providing to use Javascript in XSL and i am trying same.
Thanks allot for ur cooperation.

@Zlatev ,Really above code is not giving desired result.
Exact requirement is Different than what i am trying.I am just doing R & D first and then i will use that in my Reuiremnets.I just want to call Javascript thr XSL.
That's why i am trying above code.
I am referring this link

http://xml.apache.org/xalan-j/extensions.html#supported-lang

Actual requirement is to use .js Script file thr XSL.
Actually i am working on Server side and I have to send  Client(Vc++) some HTML Files by processing XML/XSL/JavaScript Files on server side on fly.If u have any examples in which used XML/XSL/Javascript to generate HTML output then please send me.
my mail id is <rajkumar@geodesiconline.com>
If have any other way to fulfill my requirements then please ur welcome
Thanks Allot!
Avatar of sabooraj
sabooraj

ASKER

Actually i was on wrong track to call Javascript from XSL.
Actually i want to add Javascript .js file into XSL and want to call Javascript Methos from XSL.
Now i am on track !!
Please help me out for doing same!
If anybody have examples for same then it's welcome.
Thanks Allot!
ASKER CERTIFIED SOLUTION
Avatar of Zlatin Zlatev
Zlatin Zlatev
Flag of Bulgaria image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sabooraj
sabooraj

ASKER

@ Zlatev Thanks Allot for ur kind Help....
but stucked in between......
Please help me out ......

XSL File :::::::::

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:a="DAV:" xmlns:d='urn:schemas-microsoft-com:office:office' xmlns:user="http://www.compaq.com/userfunctoins" version="1.0">
<msxsl:script language="JavaScript" implements-prefix="user" >
var ii = 0;

function folderh(){
    ii += 1;
    return (ii);
}
</msxsl:script>
<xsl:template match="/news">
<html>
     <head>
     </head>
     <body bgcolor="#DCCFFC" >
      <xsl:value-of select="user:folderh()"/>
     </body>
     </html>
</xsl:template>
</xsl:stylesheet>


::::::::::::::::::
XML File ::::::;

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="WithXalannews.xsl"?>

<news>
</news>

::::::::::::::::::::



Above Code Works Fine but When Trying to add Javascript from .js file thr src attribute ....it's giving error .....src object  not Works with MSXML.....
so tried using other code by using Url's which u(Zlatev) had sent.
Please help me out .....
Giving All files





WithXalannews.XSL File ::::::::

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:math="http://exslt.org/math"
                xmlns:xalan="http://xml.apache.org/xslt"
                xmlns:msxsl="urn:schemas-microsoft-com:xslt"
                extension-element-prefixes="math msxsl xalan">

<xsl:script implements-prefix="user" language="javascript"
            src="math.js" />
<xsl:template match="/news">
<html>
     <head>
     </head>
     <body bgcolor="#DCCFFC" >
      <xsl:value-of select="user:folderh()"/>
     </body>
     </html>
</xsl:template>
</xsl:stylesheet>

:::::::::::::::

news.XML File :::::::::

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="WithXalannews.xsl"?>

<news>
</news>

::::::::::::::::::

Math.js File::::::::


var ii = 0;

function folderh(){
    ii += 1;
    return (ii);
}

::::::::::::::::


Above Code is not working Fine It's Giving Error ::::

The XML page cannot be displayed
Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later.

--------------------------------------------------------------------------------

Keyword xsl:script may not be used in namespace http://www.w3.org/1999/XSL/Transform.
 
::::::::::::::::::::::::::::::::::::::::::
Avatar of sukesh
sukesh
First of all, for scripts with msxsl, you need to use CDATA like below and then try.

<msxsl:script implements-prefix="scripts">
       <![CDATA[
       function showXML(nodelist)
           {
           
 }
       ]]>
</msxsl:script>


Check out my website completely done using XML, XSL/XSLT.
http://www.v4cnet.com

Rgds
Sukesh
Avatar of Zlatin Zlatev
Zlatin Zlatev
Flag of Bulgaria image
@sabooraj,
You cannot use Xalan with IE. It is XML parser only for Java. I suppose that you try to view Xalan XSLT in Internet Explorer - this is why you recieve the error.

Note that you can combine Xalan and MSXML specific implementations in a single XSLT file, but you should ensure that you use only one of them and provide equivalent functions for both implementations.

HTH,
Zlatin Zlatev
SOLUTION
Avatar of stevenbaker
stevenbaker
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sabooraj
sabooraj

ASKER

I am putting my Query in 2 messages.....
First i am giving you Working Code and then will Give Error Code.
When just added  msxml JavaScript and not used any methods then it's works fine.I had also used Javascript after Transformation.That works fine.

Continue..........





Working Code:::::::
news.xsl ::::::::::::

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:a="DAV:" xmlns:d='urn:schemas-microsoft-com:office:office' xmlns:user="http://www.compaq.com/userfunctoins" version="1.0">
                        <msxsl:script language="JavaScript" implements-prefix="user" >
                        <![CDATA[
                        var headlineCounter =1;
                        function returnHeadlineCounter(){
                            return (headlineCounter);
                        }

                        var innerLayerCounter =1;
                        function innerLayerCounterIncrementByOne(){
                            return innerLayerCounter + 1;
                        }
                        function returnInnerLayer(){
                               return innerLayerCounter;
                        }
                        
                        function innerLayerAssignmentByHeadline(){
                         innerLayerCounter= headlineCounter ;
                            return "";
                        }

                        function HeadlineIncrementAsPerTotalTabs(){
                        headlineCounter =innerLayerCounter + 2 ;
                            return "";
                        }
                        ]]>
                        </msxsl:script>

      
      <xsl:template match="/news">
            <html>
                  <head>
                        <style>
                                          font{COLOR:"#F53D74";font-family:arial}
                        </style>
                        <script language="JavaScript">
                        function accessCSS(layerID)
                        {
                              if(document.getElementById){
                                    return document.getElementById(layerID).style;
                              }else if(document.all){
                                    return document.all[layerID].style;
                              }else if(document.layers){
                                    return document.layers[layerID];
                              }
                        }
                        var DivVisible = null; /*Using for Storing Visible Layer Status*/
                        function toggleVis(layerID)
                        {
                              if (DivVisible != null)
                              {
                                    if(accessCSS(DivVisible).visibility=="visible")
                                    {
                                          accessCSS(DivVisible).visibility="hidden";
                                    }
                              }
                              accessCSS(layerID).visibility="visible";
                              DivVisible = layerID;
                        }
                        </script>
                  </head>
                  <body bgcolor="#DCCFFC">
                        <table border="1" cellspacing="0" width="100%" bordercolor="#F9bF00">
                              <tr>
                                    <td width="100%">
                                          <table border="0" cellspacing="5" width="100%" cellpadding="2" align="left">
                                                <xsl:apply-templates/>
                                          </table>
                                    </td>
                              </tr>
                        </table>
                  </body>
            </html>
      </xsl:template>
      <xsl:template match="category">
            <tr>
                  <td>
                        <span style="color:yellow">
                              <xsl:value-of select="@cname"/>
                        </span>
                  </td>
            </tr>
            <tr>
                  <xsl:apply-templates select="headline"/>
            </tr>
      </xsl:template>
      <xsl:template match="headline">
            <xsl:for-each select="news/category">
                  <tr align="center" style="font-weight:bold">
                        <xsl:apply-templates/>
                  </tr>
            </xsl:for-each>
      </xsl:template>
      <xsl:template match="headline">
            <tr>
                  <td>
                        <a href="javascript:toggleVis(1)">
                              <font>
                                    <xsl:value-of select="name"/>
                              </font>
                        </a><br><xsl:value-of select="kicker"/></br>
                        <div id="1" style="left:20;top:200px;position:absolute;border:'0.2cm groove pink';visibility:hidden">
                              <TABLE width="300">
                                    <tr>
                                          <td style="background-color:pink">Story</td>
                                          <td style="background-color:pink">
                                                <a href="javascript:toggleVis(2)">Related Story
                                          </a></td>
                                    </tr>
                                    <tr >
                                          <td colspan="2" style="background-color:pink">
                                                <xsl:value-of select="summary"/>
                                          </td>
                                    </tr>
                              </TABLE>
                        </div>
                        <xsl:apply-templates select="story"/>
                  </td>
            </tr>
      </xsl:template>

      <xsl:template match="story">
            <div id="2" style="left:20;top:200px;position:absolute;border:'0.2cm groove pink';visibility:hidden">
                  <TABLE width="300">
                        <tr>
                              <td style="background-color:pink">
                                    <a href="javascript:toggleVis(1)">Story
                                          </a></td>
                              <td style="background-color:pink">Related Story</td>
                        </tr>
                        <tr>
                              <td colspan="2" style="background-color:pink">
                                    <xsl:for-each select="headline">
                                          <xsl:element name="a">
                                          <xsl:attribute name="href"><xsl:value-of select="sturl"/></xsl:attribute>
                                          <xsl:attribute name="target">_blank</xsl:attribute>
                                          <font style="color:blue">
                                                      <br>
                                                            <xsl:value-of select="stname"/>
                                                      </br>
                                          </font>
                                          </xsl:element>
                                    </xsl:for-each>
                              </td>
                        </tr>
                  </TABLE>
            </div>
      </xsl:template>
</xsl:stylesheet>


::::::::::::::

news.xml ::::::::::::

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="news.xsl"?>
<news>
      <category cname="Sports">
            <headline>
                  <name>India VS Holand</name>
                  <url>http://cricket.khel.com</url>
                  <kicker>Some brief abt Match </kicker>
                  <summary>In a startup to their world cup campain india take on holand today.
                                          All eyes will be on Sachin's performance.
                  </summary>
                  <story>
                        <headline>
                              <stname>Know all about worldcup-2003</stname>
                              <sturl>http://www.webdunia.com/cricket/wc2003/index.htm</sturl>
                        </headline>
                        <headline>
                              <stname>Know all about worldcup-2004</stname>
                              <sturl>http://www.webdunia.com/cricket/wc2003/index.htm</sturl>
                        </headline>
                  </story>
            </headline>
      </category>
</news>


::::::::::::::::::::::




Continueeeeeeeeeeee
Avatar of sabooraj
sabooraj

ASKER

Thanks allot for everybody who is helping me.....thanks allot........
Continued from Last message

In Error Code when i am calling msxml Script methods using prefix user:returnInnerLayer() then Gives Error ::::
so please help me out.....

Then getting Error:::

Exception in thread "main" javax.xml.transform.TransformerException: javax.xml.t
ransform.TransformerException: Instance method call to method returnInnerLayer r
equires an Object instance as first argument
        at org.apache.xalan.extensions.ExtensionHandlerJavaPackage.callFunction(
ExtensionHandlerJavaPackage.java:395)


news.xsl :::::With Error Code

::::::::

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:a="DAV:" xmlns:d='urn:schemas-microsoft-com:office:office' xmlns:user="http://www.compaq.com/userfunctoins" version="1.0">
                        <msxsl:script language="JavaScript" implements-prefix="user" >
                        <![CDATA[
                        var headlineCounter =1;
                        var innerLayerCounter =1;
                                          
                        function returnHeadlineCounter(){
                            return (headlineCounter);
                        }


                        function innerLayerCounterIncrementByOne(){
                            return innerLayerCounter + 1;
                        }
                        function returnInnerLayer(){
                               return ( innerLayerCounter);
                        }
                        
                        function innerLayerAssignmentByHeadline(){
                         innerLayerCounter= headlineCounter ;
                            return "";
                        }

                        function HeadlineIncrementAsPerTotalTabs(){
                        headlineCounter =innerLayerCounter + 2 ;
                            return "";
                        }
                        ]]>
                        </msxsl:script>

      
      <xsl:template match="/news">
            <html>
                  <head>
                        <style>
                                          font{COLOR:"#F53D74";font-family:arial}
                        </style>
                        <script language="JavaScript">
                        function accessCSS(layerID)
                        {
                              if(document.getElementById){
                                    return document.getElementById(layerID).style;
                              }else if(document.all){
                                    return document.all[layerID].style;
                              }else if(document.layers){
                                    return document.layers[layerID];
                              }
                        }
                        var DivVisible = null; /*Using for Storing Visible Layer Status*/
                        function toggleVis(layerID)
                        {
                              if (DivVisible != null)
                              {
                                    if(accessCSS(DivVisible).visibility=="visible")
                                    {
                                          accessCSS(DivVisible).visibility="hidden";
                                    }
                              }
                              accessCSS(layerID).visibility="visible";
                              DivVisible = layerID;
                        }
                        </script>
                  </head>
                  <body bgcolor="#DCCFFC">
                        <table border="1" cellspacing="0" width="100%" bordercolor="#F9bF00">
                              <tr>
                                    <td width="100%">
                                          <table border="0" cellspacing="5" width="100%" cellpadding="2" align="left">
                                                <xsl:apply-templates/>
                                          </table>
                                    </td>
                              </tr>
                        </table>
                  </body>
            </html>
      </xsl:template>
      <xsl:template match="category">
            <tr>
                  <td>
                        <span style="color:yellow">
                              <xsl:value-of select="@cname"/>
                        </span>
                  </td>
            </tr>
            <tr>
                  <xsl:apply-templates select="headline"/>
            </tr>
      </xsl:template>
      <xsl:template match="headline">
            <xsl:for-each select="news/category">
                  <tr align="center" style="font-weight:bold">
                        <xsl:apply-templates/>
                  </tr>
            </xsl:for-each>
      </xsl:template>
      <xsl:template match="headline">
            <tr>
                  <td>
                        <a href="javascript:toggleVis(1)">
                              <font>
                                    <xsl:value-of select="name"/>
                              </font>
                        </a><br><xsl:value-of select="kicker"/></br>
                  <xsl:element name="div">
                              <xsl:attribute name="id"><xsl:value-of select = "user:returnInnerLayer()"/></xsl:attribute>
                              <xsl:attribute name="style"><xsl:value-of select =  "concat('','width:300;height:100;overflow-y: auto ;scrollbar-3dlight-color :red;left:20;top:200px;position:absolute;visibility:hidden')"/></xsl:attribute>
                              <TABLE width="300" >
                                    <tr>
                                          <td style="background-color:pink">Story</td>
                                          <td style="background-color:pink">
                                          <xsl:element name="a">
                                                <xsl:attribute name="href"><xsl:value-of select = "concat('javascript:toggleVis(',user:innerLayerCounterIncrementByOne(),')')"/></xsl:attribute>
                                                <font>Related Story</font>
                                          </xsl:element>
                                          </td>
                                    </tr>
                                    <tr >
                                          <td colspan="2" style="background-color:pink">
                                                <xsl:value-of select="summary"/>
                                          </td>
                                    </tr>
                              </TABLE>
                        </xsl:element>

                        <xsl:apply-templates select="story"/>
                  </td>
            </tr>
      </xsl:template>

      <xsl:template match="story">
            <div id="2" style="left:20;top:200px;position:absolute;border:'0.2cm groove pink';visibility:hidden">
                  <TABLE width="300">
                        <tr>
                              <td style="background-color:pink">
                                    <a href="javascript:toggleVis(1)">Story
                                          </a></td>
                              <td style="background-color:pink">Related Story</td>
                        </tr>
                        <tr>
                              <td colspan="2" style="background-color:pink">
                                    <xsl:for-each select="headline">
                                          <xsl:element name="a">
                                          <xsl:attribute name="href"><xsl:value-of select="sturl"/></xsl:attribute>
                                          <xsl:attribute name="target">_blank</xsl:attribute>
                                          <font style="color:blue">
                                                      <br>
                                                            <xsl:value-of select="stname"/>
                                                      </br>
                                          </font>
                                          </xsl:element>
                                    </xsl:for-each>
                              </td>
                        </tr>
                  </TABLE>
            </div>
      </xsl:template>
</xsl:stylesheet>


:::::::::


Avatar of Zlatin Zlatev
Zlatin Zlatev
Flag of Bulgaria image
<q>Actually i am working on Server side and I have to send  Client(Vc++) some HTML Files by processing XML/XSL/JavaScript Files on server side on fly.If u have any examples in which used XML/XSL/Javascript to generate HTML output then please send me.
</q>

@sabooraj, do you mean that you have specific client? not an ordinary browser?
What server do you have? Apache with Java&Xalan?
Will be there any XSL Transformation on the client? If yes - what parser will you use? MSXML?
Avatar of Zlatin Zlatev
Zlatin Zlatev
Flag of Bulgaria image
Thank you
Avatar of stevenbaker
stevenbaker
thanks