Wrox Programmer Forums
Go Back   Wrox Programmer Forums > XML > XSLT
| 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 Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old June 1st, 2007, 01: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



 
Old June 1st, 2007, 01:30 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 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)
 
Old June 1st, 2007, 01: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>

 
Old June 1st, 2007, 03:49 AM
mhkay's Avatar
Wrox Author
Points: 18,487, Level: 59
Points: 18,487, Level: 59 Points: 18,487, Level: 59 Points: 18,487, Level: 59
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2004
Location: Reading, Berks, United Kingdom.
Posts: 4,962
Thanks: 0
Thanked 292 Times in 287 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
 
Old June 1st, 2007, 03:51 AM
mhkay's Avatar
Wrox Author
Points: 18,487, Level: 59
Points: 18,487, Level: 59 Points: 18,487, Level: 59 Points: 18,487, Level: 59
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2004
Location: Reading, Berks, United Kingdom.
Posts: 4,962
Thanks: 0
Thanked 292 Times in 287 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
 
Old June 1st, 2007, 06: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>







 
Old June 1st, 2007, 08:15 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 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)
 
Old June 2nd, 2007, 07: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.

 
Old June 4th, 2007, 01:46 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 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)
 
Old June 4th, 2007, 03: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






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 12:22 AM
Converting Source Xml into Target Xml Using XSL. alapati.sasi XSLT 3 May 14th, 2007 10:54 AM
Clickable images in grid or detailsview ewhizz ASP.NET 2.0 Basics 1 August 2nd, 2006 10:33 AM
xml and xsl templates as input to xslt gives xml rameshnarayan XSLT 5 August 3rd, 2005 01:58 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.