javascript function in xslt

swapnilp1983 · November 3rd, 2006, 07:16 AM

Hi All,
I need some help,
I am duing a website, in which in left side frame I want to show navigate buttons. To create navigate buttons I am using xml and xslt.

I want to use function to add navigate button, But I don't know how to do it? Please help

Folloing is my code, but not working properly, please suggest

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0"/>
<xsl:template match="menu">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript"><![CDATA[
    function doButtons(name,pic)
    {
        document[name].src=pic;
    }
]]>
</SCRIPT>
</head>
<body>
<table border="0">
<xsl:for-each select="menuItem">
<tr><td>
    <a>
    <xsl:attribute name="href"><xsl:value-of select="link"></xsl:value-of></xsl:attribute>
    <xsl:attribute name="target">DetailsPage</xsl:attribute>
    <xsl:attribute name="onmouseover">doButtons('<xsl:value-of select="ID"></xsl:value-of>','<xsl:value-of select="pic1"></xsl:value-of>')</xsl:attribute>
    <xsl:attribute name="onmouseout">doButtons('<xsl:value-of select="ID"></xsl:value-of>','<xsl:value-of select="pic2"></xsl:value-of>')</xsl:attribute>
    <img><xsl:attribute name="name"><xsl:value-of select="ID"></xsl:value-of></xsl:attribute>
    <xsl:attribute name="src"><xsl:value-of select="img"></xsl:value-of></xsl:attribute></img>
    </a>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Please help me to solve this problem

Thanks and ragards,
Swapnil

mhkay · November 3rd, 2006, 08:41 AM

Do you know what HTML you want to generate? If so, I can help you write the XSLT to create it. If not, sorry, I can't help you.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

swapnilp1983 · November 4th, 2006, 02:59 AM

Hi Michael,
Html should be like following

<html><head>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<SCRIPT language=JavaScript1.2 src="menu_script.js" type=text/javascript></SCRIPT>
<link rel="stylesheet" href="mas.css">
</head>
<body topmargin="0" leftmargin="0" background="design/page_back.jpg">

<table border="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111" width="160" id="AutoNumber1" cellspacing="1">
<tr><td><a href="whatarewe.htm">
<img name=m1 border="0" src="design/whatrwe1.jpg" width="134" height="22"></a></td></tr>

<tr><td><a href="whyus.htm"
onMouseOver="style.cursor='hand'; doButtons('m2','design/whyus2.jpg');"
onMouseOut="doButtons('m2','design/whyus1.jpg'); onClick="location.href='whyus.htm';">
<img name=m2 border="0" src="design/whyus1" width="134" height="22"></a></td></tr>

<tr><td><a href="knowser.htm"
onMouseOver="style.cursor='hand'; doButtons('m3','design/knowser2.jpg');showLayer('Knowledge'); "
onMouseOut="doButtons('m3','design/knowser1.jpg'); hideLayer('Knowledge'); " onClick="location.href='knowser.htm';">
<img name=m3 border="0" src="design/knowser1.jpg" width="134" height="22"></a></td></tr>
</table>
</body>
</html>

Swapnil.

joefawcett · November 4th, 2006, 04:47 AM

Okay, there are some big differences between your XSLT and required output. For example your XSLT defines a target attribute for the links but your HTML code doesn't. Similarly your HTML has an onclick handler for the links, your XSLT doesn't. (Why you want an onclick for a link that only does what a link does anyway is another question.)

So can you show your XML file and can you specify in what way it "doesn't work"?

--

Joe (Microsoft MVP - XML)

mhkay · November 4th, 2006, 04:49 AM

OK, so please now explain where your difficulty lies in converting your XML input into this desired output. I don't really want to spend time doing a "spot the difference" competition between your desired output and your actual output.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

swapnilp1983 · November 4th, 2006, 05:25 AM

Hi, Actually I am new to xml and xsl.

Forget about onclick, I don't want that. I am able to generate desire output but My problem is I am getting error when mouseover function get called.

What I want is that, on mouseover the current image should get replace with another image.(Ex. On my web form there is nagivation link 'What are we' and I am using image (whtrwe1.jpg) for that. When user take mouse over the image (whtrwe1.jpg), current image should get replace by another image (whtrwe2.jpg).

Following is my XML file

<?xml version="1.0" encoding="utf-8" ?>
<menu>
    <menuItem>
        <imgName>m1</imgName>
        <pic1>design\whtrwe1.jpg</pic1>
        <pic2>design\whtrwe2.jpg</pic2>
        <link>whatrwe.aspx</link>
    </menuItem>
    <menuItem>
        <imgName>m2</imgName>
        <pic1>design\whyus1.jpg</pic1>
        <pic2>design\whyus2.jpg</pic2>
        <link>whyus.aspx</link>
    </menuItem>
</menu>

And following is xslt file

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0"/>
<xsl:template match="menu">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript"><![CDATA[
    function doButtons(name,pic)
    {
        document[name].src=pic;
    }
]]>
</SCRIPT>
</head>
<body>
<table border="0">
<xsl:for-each select="menuItem">
<tr><td>
    <a>
    <xsl:attribute name="href"><xsl:value-of select="link"></xsl:value-of></xsl:attribute>
    <xsl:attribute name="target">DetailsPage</xsl:attribute>
    <xsl:attribute name="onmouseover">doButtons('<xsl:value-of select="ID"></xsl:value-of>','<xsl:value-of select="pic1"></xsl:value-of>')</xsl:attribute>
    <xsl:attribute name="onmouseout">doButtons('<xsl:value-of select="ID"></xsl:value-of>','<xsl:value-of select="pic2"></xsl:value-of>')</xsl:attribute>
    <img><xsl:attribute name="name"><xsl:value-of select="ID"></xsl:value-of></xsl:attribute>
    <xsl:attribute name="src"><xsl:value-of select="img"></xsl:value-of></xsl:attribute></img>
    </a>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

mhkay · November 4th, 2006, 05:32 AM

>What I want is that, on mouseover the current image should get replace with another image.(Ex. On my web form there is nagivation link 'What are we' and I am using image (whtrwe1.jpg) for that. When user take mouse over the image (whtrwe1.jpg), current image should get replace by another image (whtrwe2.jpg).

Have you managed to write an HTML page "by hand" that achieves the effect you want? It sounds to me as if you are having problems with your HTML, not with your XSLT. Never write an XSLT stylesheet (or a program in any other language) until you know what output it is supposed to produce.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

joefawcett · November 4th, 2006, 06:52 AM

This is purely an HTML/script issue.

Code:

function doButtons(name, pic)
{
  //remove when working
  alert("Name: " + name + "\nPic: " + pic);
  document.getElementById(name).src = pic;
}

--

Joe (Microsoft MVP - XML)

swapnilp1983 · November 4th, 2006, 07:59 AM

Thanks Joe,

I will try it.

swapnilp1983 · November 6th, 2006, 01:54 AM

Hi,

Actually the problem is that, when I call the image path from xml file using "xml:attribute src" it take it as "img\whtrwe1.jpg" (which is right), but when I pass the same attribute as a parameter to function it take the path as "imgwhtrwe1.jpg" (i.e. '\' get disappear from path)

Please suggest the solution.

Following is the XML file:

<?xml version="1.0" encoding="utf-8" ?>
<menu>
    <menuItem>
        <imgName>whtrwe</imgName>
        <pic1>img\whtrwe1.jpg</pic1>
        <pic2>img\whtrwe2.jpg</pic2>
        <link>whatrwe.aspx</link>
    </menuItem>
</menu>

Following is the XSLT file:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0"/>
<xsl:template match="menu">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript"><![CDATA[
    function doButtons(imgName, pic)
    {
        document.getElementByID(imgName).src = pic;
    }
]]>
</SCRIPT>
</head>
<body>
<table border="0">
<xsl:for-each select="menuItem">
<tr><td>
    <a>
    <xsl:attribute name="href"><xsl:value-of select="link"></xsl:value-of></xsl:attribute>
    <xsl:attribute name="target">DetailsPage</xsl:attribute>
    <xsl:attribute name="onmouseover">doButtons('<xsl:value-of select="imgName"></xsl:value-of>', '<xsl:value-of select="pic1"></xsl:value-of>')</xsl:attribute>
    <xsl:attribute name="onmouseout">doButtons('<xsl:value-of select="imgName"></xsl:value-of>', '<xsl:value-of select="pic2"></xsl:value-of>')</xsl:attribute>
    <img><xsl:attribute name="name"><xsl:value-of select="imgName"></xsl:value-of></xsl:attribute>
    <xsl:attribute name="src"><xsl:value-of select="pic1"></xsl:value-of></xsl:attribute></img>
    </a>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Thanks and reagrds,