Solved

XLST DIV Onclick

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

785 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