Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

XLST DIV Onclick

Posted on 2009-05-06
5
Medium Priority
?
436 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

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?
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

715 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