metta0_3
asked on
XLST DIV Onclick
Here is the example XML:
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="sites.xsl" ?>
<sites id="0">
<siteName id="1.0" name="London">
<groupName id="1.0.0" name="Administration"></gr oupName>
<groupName id="1.0.1" name="IT">
<extensionName id="1.0.1.0" name="1234"></extensionNam e>
</groupName>
<siteName id="1.0.2" name="Greenwich"></siteNam e>
</siteName>
<siteName id="2.0" name="Medway">
<groupName id="2.0.0" name="Sales">
<groupName id="2.0.0.0" name="Telesales">
<groupName id="2.0.0.0.0" name="Phones"></groupName>
<extensionName id="2.0.0.0.1" name="4322" source="extensionNumber.pn g"></exten sionName>
</groupName>
</groupName>
</siteName>
</sites>
Here is the corresponding XSLT:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:key name="obj" match="*" use="@id"/>
<xsl:param name="detail-id"/>
<xsl:template match="/">
<div id="SITES">
<xsl:for-each select="key('obj', $detail-id)[@name and @id]">
<div>
<img src="Images/back.png" width="32px" height="32px"/>
<span>
<xsl:attribute name="style">
<xsl:text>color:black; font-style:bold; text-decoration:underline; </xsl:text >
</xsl:attribute>
<xsl:attribute name="onclick">
<xsl:text>showDetail('</xs l:text>
<xsl:value-of select="parent::*/@id"/>
<xsl:text>');</xsl:text>
</xsl:attribute>
<xsl:text>up again</xsl:text>
</span>
</div>
</xsl:for-each>
<xsl:for-each select="key('obj', $detail-id)/*[not(self::na me)]">
<xsl:sort select="name()" order="descending"/>
<div class="myDiv">
<xsl:if test="self::siteName">
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<xsl:if test="self::groupName">
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<xsl:if test="self::extensionName" >
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<span>
<xsl:attribute name="style">
<xsl:if test="*[@id]">
<xsl:text>font-style:bold; text-decoration:underline; </xsl:text >
</xsl:if>
</xsl:attribute>
<xsl:if test="*[@id]">
<xsl:attribute name="onclick">
<xsl:text>showDetail('</xs l:text>
<xsl:value-of select="@id"/>
<xsl:text>');</xsl:text>
</xsl:attribute>
</xsl:if>
<xsl:value-of select="@name"/>
</span>
</div>
</xsl:for-each>
</div>
</xsl:template>
</xsl:stylesheet>
Here is the part where my problem resides:
<div class="myDiv">
<xsl:if test="self::siteName">
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<xsl:if test="self::groupName">
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<xsl:if test="self::extensionName" >
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<span>
<xsl:attribute name="style">
<xsl:if test="*[@id]">
<xsl:text>font-style:bold; text-decoration:underline; </xsl:text >
</xsl:if>
</xsl:attribute>
<xsl:if test="*[@id]">
<xsl:attribute name="onclick">
<xsl:text>showDetail('</xs l:text>
<xsl:value-of select="@id"/>
<xsl:text>');</xsl:text>
</xsl:attribute>
</xsl:if>
<xsl:value-of select="@name"/>
</span>
</div>
I am trying to make the contanier div class name 'myDiv' to have an onclick event associated with it. I currently have an onclick event for just the text output inside this div. I also have images that relate to the text and a border around the whole div. If I could just get it to work where the whole div can be clicked not just the including text.
I also need to get the container div to have a unique id based on the XML elements id attribute that can be seen in the XML at the top. Please can you help. To be frank I have only been looking into xslt for a week and it is very complex in my opinion and has a very steep learning curve. Thank you in advance.
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="sites.xsl" ?>
<sites id="0">
<siteName id="1.0" name="London">
<groupName id="1.0.0" name="Administration"></gr
<groupName id="1.0.1" name="IT">
<extensionName id="1.0.1.0" name="1234"></extensionNam
</groupName>
<siteName id="1.0.2" name="Greenwich"></siteNam
</siteName>
<siteName id="2.0" name="Medway">
<groupName id="2.0.0" name="Sales">
<groupName id="2.0.0.0" name="Telesales">
<groupName id="2.0.0.0.0" name="Phones"></groupName>
<extensionName id="2.0.0.0.1" name="4322" source="extensionNumber.pn
</groupName>
</groupName>
</siteName>
</sites>
Here is the corresponding XSLT:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:key name="obj" match="*" use="@id"/>
<xsl:param name="detail-id"/>
<xsl:template match="/">
<div id="SITES">
<xsl:for-each select="key('obj', $detail-id)[@name and @id]">
<div>
<img src="Images/back.png" width="32px" height="32px"/>
<span>
<xsl:attribute name="style">
<xsl:text>color:black; font-style:bold; text-decoration:underline;
</xsl:attribute>
<xsl:attribute name="onclick">
<xsl:text>showDetail('</xs
<xsl:value-of select="parent::*/@id"/>
<xsl:text>');</xsl:text>
</xsl:attribute>
<xsl:text>up again</xsl:text>
</span>
</div>
</xsl:for-each>
<xsl:for-each select="key('obj', $detail-id)/*[not(self::na
<xsl:sort select="name()" order="descending"/>
<div class="myDiv">
<xsl:if test="self::siteName">
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<xsl:if test="self::groupName">
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<xsl:if test="self::extensionName"
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<span>
<xsl:attribute name="style">
<xsl:if test="*[@id]">
<xsl:text>font-style:bold;
</xsl:if>
</xsl:attribute>
<xsl:if test="*[@id]">
<xsl:attribute name="onclick">
<xsl:text>showDetail('</xs
<xsl:value-of select="@id"/>
<xsl:text>');</xsl:text>
</xsl:attribute>
</xsl:if>
<xsl:value-of select="@name"/>
</span>
</div>
</xsl:for-each>
</div>
</xsl:template>
</xsl:stylesheet>
Here is the part where my problem resides:
<div class="myDiv">
<xsl:if test="self::siteName">
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<xsl:if test="self::groupName">
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<xsl:if test="self::extensionName"
<img src="Images/{name()}.png" width="32px" height="32px"/>
</xsl:if>
<span>
<xsl:attribute name="style">
<xsl:if test="*[@id]">
<xsl:text>font-style:bold;
</xsl:if>
</xsl:attribute>
<xsl:if test="*[@id]">
<xsl:attribute name="onclick">
<xsl:text>showDetail('</xs
<xsl:value-of select="@id"/>
<xsl:text>');</xsl:text>
</xsl:attribute>
</xsl:if>
<xsl:value-of select="@name"/>
</span>
</div>
I am trying to make the contanier div class name 'myDiv' to have an onclick event associated with it. I currently have an onclick event for just the text output inside this div. I also have images that relate to the text and a border around the whole div. If I could just get it to work where the whole div can be clicked not just the including text.
I also need to get the container div to have a unique id based on the XML elements id attribute that can be seen in the XML at the top. Please can you help. To be frank I have only been looking into xslt for a week and it is very complex in my opinion and has a very steep learning curve. Thank you in advance.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I have done what you suggested. The div is now completely clickable which is fantastic.
I just have to test that the
<div class="myDiv" id="{@id}">
does in fact assign the xml elements id attribute to the div id. The I will award points. You have been fabulous with helping me with this.
Thank you very much.
I just have to test that the
<div class="myDiv" id="{@id}">
does in fact assign the xml elements id attribute to the div id. The I will award points. You have been fabulous with helping me with this.
Thank you very much.
ASKER
Everyone worked fine. Thank you once again. Im sure you may well be hearing from me once more. Regards..
welcome
<div class="myDiv">
<xsl:if test="*[@id]">
<xsl:attribute name="onclick">
<xsl:text>showDetail('</xs
<xsl:value-of select="@id"/>
<xsl:text>');</xsl:text>
</xsl:attribute>
</xsl:if>
I assume that would make the div clickable