p2p.wrox.com Forums

Need to download code?

View our list of code downloads.


Go Back   p2p.wrox.com Forums > XML > XSLT
I forgot my password Register Now
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
XSLT General questions and answers about XSLT. For issues strictly specific to the book XSLT 1.1 Programmers Reference, please post to that forum instead.

Welcome to the p2p.wrox.com Forums.

You are currently viewing the XSLT section of the Wrox p2p Programmer to Programmer discussion community. This is a community of more than 40,000 computer programmers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining our free Wrox p2p community you can post your own programming questions and respond to other programmers’ questions. Registered users also don't have to see the ads that are displayed to guests. Registration is fast, simple and absolutely free so please, join today!
Join today and post to win prizes! Post more to increase your chances of being Wrox’s top poster of the month.

Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old June 1st, 2007, 02:23 AM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default Clickable images Using xml and xsl(Urgent)

i want to make clickable image.on click of repeat image i want to open a new html page.also i am having problem when i click image it is expanding and collapsing the sub childs.Kindly reply
XML used is :
<tree>
<group id="GRP4">
            <name>GRP4</name>
            <next>100</next>
             <repeat>images/repeat.gif</repeat>
            <plus>images/plus.gif</plus>
            <minus>images/minus.gif</minus>
            <contents>
                <group id="GRP21">
                <name>GRP21</name>
                <next>101</next>
                <plus>images/plus.gif</plus>
                <repeat>images/repeat.gif</repeat>
                <nextS>102</nextS>
                <icon>images/next.gif</icon>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
                <group id="GRP69">
                <name>GRP69</name>
                <plus>images/plus.gif</plus>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
            </contents>
            </group>
                  </tree>

XSL used is :

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript">

<xsl:template match="tree">
   <xsl:apply-templates select="group"/>
 </xsl:template>
 <xsl:template match="group">
  <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false" ondragstart="return false">
  <xsl:attribute name="plus"><xsl:value-of select="plus"/></xsl:attribute>
  <xsl:attribute name="minus"><xsl:value-of select="minus"/></xsl:attribute>
  <xsl:attribute name="nextS"><xsl:value-of select="nextS"/></xsl:attribute>
  <xsl:attribute name="icon"><xsl:value-of select="icon"/></xsl:attribute>
  <xsl:attribute name="repeat"><xsl:value-of select="repeat"/></xsl:attribute>
  <xsl:attribute name="next"><xsl:value-of select="next"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="id">f<xsl:value-of select="@id"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="STYLE">
    padding-left: 20px;
    cursor: hand;
    <xsl:if expr="depth(this) > 2">
      display: none;
    </xsl:if>
  </xsl:attribute>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="middle">
          <img border="0" id="plus">
            <xsl:attribute name="SRC">
              <xsl:value-of select="plus"/>
            </xsl:attribute>
          </img>
        </td>
        <td valign="middle" nowrap="true">
        <xsl:attribute name="STYLE">
          padding-left: 7px;
          font-family: Verdana;
          font-size: 11px;
          font-color: black;
        </xsl:attribute>
        <xsl:value-of select="name"/></td>
        </tr>
        <tr valign="middle" nowrap="false">
        <xsl:attribute name="STYLE">
              padding-left: 7px;
              font-family: Verdana;
              font-size: 11px;
              font-color: black;
        </xsl:attribute>
        <xsl:value-of select="next"/>
        <xsl:if test="next">
        <img border="0" id="repeat">
         <xsl:attribute name="SRC">
         <xsl:value-of select="repeat"/>
        </xsl:attribute>
       </img>
         </xsl:if>
     </tr>
         <tr valign="middle" nowrap="false">
     <xsl:attribute name="STYLE">
          padding-left: 7px;
          font-family: Verdana;
          font-size: 11px;
          font-color: black;
     </xsl:attribute>
      <xsl:value-of select="nextS"/>
      <xsl:if test="nextS">
        <img border="0" id="icon">
         <xsl:attribute name="SRC">
         <xsl:value-of select="icon"/>
         </xsl:attribute>
       </img>
      </xsl:if>
         </tr>

     </table>
  <xsl:apply-templates select="contents/group"/>
 </xsl:template>
</xsl:stylesheet>


JS used is :function clickOnEntity(group) {
  if(group.open == "false" ) {
    expand(group, true)
  }
  else {
    collapse(group)
  }
  window.event.cancelBubble = true
}

function expand(group) {
  var oImage

  oImage = group.childNodes(0).all["plus"]
  oImage.src = group.minus
  for(i=0; i < group.childNodes.length; i++) {
    if(group.childNodes(i).tagName == "DIV") {
      group.childNodes(i).style.display = "block"
    }
  }
  group.open = "true"
}

Thanks



Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #2 (permalink)  
Old June 1st, 2007, 02:30 AM
joefawcett's Avatar
Wrox Author
Points: 8,994, Level: 40
Points: 8,994, Level: 40 Points: 8,994, Level: 40 Points: 8,994, Level: 40
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 2,922
Thanks: 0
Thanked 13 Times in 12 Posts
Default

If you want a clickable image then show the HTML that you need, after testing a static version to make sure it works in the browser. Once you have that it should be easier to repair your XSLT.

--

Joe (Microsoft MVP - XML)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #3 (permalink)  
Old June 1st, 2007, 02:33 AM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

This is the HTML:


<HTML>
<HEAD>
<LINK REL="stylesheet" type="text/css" href="css/tree.css"/>
<SCRIPT LANGUAGE="Javascript" SRC="tree/tree.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="common/css.js"></SCRIPT>
</HEAD>
<BODY ONLOAD="initialize()" ONSELECTSTART="return false" TOPMARGIN="0" LEFTMARGIN="0">

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <TR STYLE="background-color: #5389bc;">
    <TD><DIV CLASS="bOut" ONMOUSEOVER="swapClass(this, 'bOver')" ONMOUSEOUT="swapClass(this, 'bOut')" ONCLICK="expandAll(folderTree)">Expand</DIV></TD>
    <TD><DIV CLASS="bOut" ONMOUSEOVER="swapClass(this, 'bOver')" ONMOUSEOUT="swapClass(this, 'bOut')" ONCLICK="collapse(folderTree)">Minimize</DIV></TD>
    <TD WIDTH="100%"></TD>
  </TR>
</TABLE>


<DIV id="folderTree" STYLE="padding-top: 8px;"></DIV>

</BODY>
</HTML>

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #4 (permalink)  
Old June 1st, 2007, 04:49 AM
mhkay's Avatar
Wrox Author
Points: 12,735, Level: 48
Points: 12,735, Level: 48 Points: 12,735, Level: 48 Points: 12,735, Level: 48
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Apr 2004
Location: Reading, Berks, United Kingdom.
Posts: 3,923
Thanks: 0
Thanked 82 Times in 80 Posts
Default

So, you know what HTML you want to generate. Which part of it are you having difficulty generating? How does your actual generated HTML differ from the HTML you want to generate?

Incidentally, you don't seem to have discovered attribute value templates. Things like this:

<img border="0" id="plus">
            <xsl:attribute name="SRC">
              <xsl:value-of select="plus"/>
            </xsl:attribute>
          </img>

can be written much more concisely as

<img border="0" id="plus" SRC="{plus}"/>

I've no idea what this code is doing:

  <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false" ondragstart="return false">
  <xsl:attribute name="plus"><xsl:value-of select="plus"/></xsl:attribute>
  <xsl:attribute name="minus"><xsl:value-of select="minus"/></xsl:attribute>
  <xsl:attribute name="nextS"><xsl:value-of select="nextS"/></xsl:attribute>
  <xsl:attribute name="icon"><xsl:value-of select="icon"/></xsl:attribute>
  <xsl:attribute name="repeat"><xsl:value-of select="repeat"/></xsl:attribute>
  <xsl:attribute name="next"><xsl:value-of select="next"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="id">f<xsl:value-of select="@id"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="STYLE">
    padding-left: 20px;
    cursor: hand;
    <xsl:if expr="depth(this) > 2">
      display: none;
    </xsl:if>
  </xsl:attribute>

it seems to generate lots of attributes that aren't defined in HTML and that bear no relation to anything in your desired output. It even generates some attributes twice!

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #5 (permalink)  
Old June 1st, 2007, 04:51 AM
mhkay's Avatar
Wrox Author
Points: 12,735, Level: 48
Points: 12,735, Level: 48 Points: 12,735, Level: 48 Points: 12,735, Level: 48
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Apr 2004
Location: Reading, Berks, United Kingdom.
Posts: 3,923
Thanks: 0
Thanked 82 Times in 80 Posts
Default

One other point, I just noticed this:

<xsl:if expr="depth(this) > 2">

That suggests you aren't using XSLT at all, but rather the obsolete 1998 WD-xsl language invented by Microsoft as a short-term expedient while XSLT was still being standardised.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #6 (permalink)  
Old June 1st, 2007, 07:27 AM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

actually we are trying to display tree hierarchy using xml and xsl .
i want to have xsl which renders the xml i have already mentioned.also we need img icons in front of groups on click of which we want to call another html page.Those attributes were defined to enable the expand and collapse functionality provided as functions in js.
If anybody can sujjest the XSL so that things work out the right way .
XML :
<tree>
<group id="GRP2">
    <name>GRP2</name>
    <plus>images/plus.gif</plus>
    <minus>images/minus.gif</minus>
    <contents>
        <group id="GRP3">
        <name>GRP3</name>
        <plus>images/plus.gif</plus>
        <minus>images/minus.gif</minus>
        <contents>
            <group id="GRP4">
            <name>GRP4</name>
            <plus>images/plus.gif</plus>
            <minus>images/minus.gif</minus>
            <contents>
                <group id="GRP21">
                <name>GRP21</name>
                <plus>images/plus.gif</plus>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
                <group id="GRP69">
                <name>GRP69</name>
                <plus>images/plus.gif</plus>
                <minus>images/minus.gif</minus>
                <contents></contents>
                </group>
            </contents>
            </group>
            <group id="GRP68">
            <name>GRP68</name>
            <plus>images/plus.gif</plus>
            <minus>images/minus.gif</minus>
            <contents></contents>
            </group>
        </contents>
        </group>
        <group id="JJJ">
        <name>JJJ</name>
        <plus>images/plus.gif</plus>
        <minus>images/minus.gif</minus>
        <contents></contents>
        </group>
    </contents>
    </group>
</tree>







Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #7 (permalink)  
Old June 1st, 2007, 09:15 AM
joefawcett's Avatar
Wrox Author
Points: 8,994, Level: 40
Points: 8,994, Level: 40 Points: 8,994, Level: 40 Points: 8,994, Level: 40
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 2,922
Thanks: 0
Thanked 13 Times in 12 Posts
Default

Well, as Michael says, you're not using XSLT but WD-XSL as shown by the namespace xmlns:xsl="http://www.w3.org/TR/WD-xsl. No-one uses this nowadays, it was, as its name suggests, a working draft. It's not supported or clearly documented. Can you move to using XSLT?

--

Joe (Microsoft MVP - XML)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #8 (permalink)  
Old June 2nd, 2007, 08:25 AM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

yes we can move move to XSLT .but how to implement my Query of displaying tree using the XML we have.

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #9 (permalink)  
Old June 4th, 2007, 02:46 AM
joefawcett's Avatar
Wrox Author
Points: 8,994, Level: 40
Points: 8,994, Level: 40 Points: 8,994, Level: 40 Points: 8,994, Level: 40
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 2,922
Thanks: 0
Thanked 13 Times in 12 Posts
Default

So you need a template that matches each group element and outputs a list or a div element. You then need to examine the elements that dictate the images and then process any contents/group element in the same way.

--

Joe (Microsoft MVP - XML)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
  #10 (permalink)  
Old June 4th, 2007, 04:36 AM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

yes..and also based on the value of name node i should be able to show some image in front of it dynamically.
i.e. if the node is name then show image1.gif in front of it and if the node is name1 then show image2.gif .
Is there solution ?
What wud be the XSLT as we are new to xslt so not able to frame it


Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit!
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Need Help in XSL Transformation -Urgent ysrsridhar XSLT 2 November 11th, 2008 04:03 AM
Clickable background AbrarNazeer CSS Cascading Style Sheets 4 April 9th, 2008 01:22 AM
Converting Source Xml into Target Xml Using XSL. alapati.sasi XSLT 3 May 14th, 2007 11:54 AM
Clickable images in grid or detailsview ewhizz ASP.NET 2.0 Basics 1 August 2nd, 2006 11:33 AM
xml and xsl templates as input to xslt gives xml rameshnarayan XSLT 5 August 3rd, 2005 02:58 AM



All times are GMT -4. The time now is 02:31 AM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
© 2008 Wiley Publishing, Inc