Solved

XLST DIV Onclick

Posted on 2009-05-06
5
398 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error viewing ASP page 12 149
Formatting issues in XSL FO 3 30
JQuery to parse xml string and get element by id 4 22
Where can I ask about my ASP.NET MVC project? 6 21
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

910 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now