Solved

XLST DIV Onclick

Posted on 2009-05-06
5
409 Views
Last Modified: 2013-11-18
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"></groupName>
         <groupName id="1.0.1" name="IT">
             <extensionName id="1.0.1.0" name="1234"></extensionName>
       </groupName>
         <siteName id="1.0.2" name="Greenwich"></siteName>
  </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.png"></extensionName>
          </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('</xsl: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::name)]">
            <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('</xsl: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('</xsl: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.

0
Comment
Question by:metta0_3
  • 3
  • 2
5 Comments
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 24314019
For your first, can't you simply move the xsl:attribute to the div element?

<div class="myDiv">
                      <xsl:if test="*[@id]">
                         <xsl:attribute name="onclick">
                                <xsl:text>showDetail('</xsl:text>
                                <xsl:value-of select="@id"/>
                                <xsl:text>');</xsl:text>
                        </xsl:attribute>                            
                              </xsl:if>                

I assume that would make the div clickable                  
0
 
LVL 60

Accepted Solution

by:
Geert Bormans earned 500 total points
ID: 24314033
           <xsl:for-each select="key('obj', $detail-id)[@name and @id]">
                <div>

should be
            <xsl:for-each select="key('obj', $detail-id)[@name and @id]">
                <div id="{@id}">
0
 

Author Comment

by:metta0_3
ID: 24314153
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.
0
 

Author Closing Comment

by:metta0_3
ID: 31578426
Everyone worked fine. Thank you once again. Im sure you may well be hearing from me once more. Regards..
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 24315514
welcome
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question