Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

XLST DIV Onclick

Posted on 2009-05-06
5
Medium Priority
?
442 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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
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.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

972 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