need help in generating static ID

mferrer · July 8th, 2006, 08:24 PM

Hi,

My XSLT and XML files are below. What I'm hoping to achieve is that when I click the hyperlink, its corresponding section should appear and then disappear on the next click.

XML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="profile_style.xsl"?>

<CUSTOMER>
    <FAQ>
        <QUESTION id="1">1044 Error Message</QUESTION>
        <GUIDE>This is the guide to answer to error 1044.</GUIDE>
        <ANSWER>This is the answer to error 1044.</ANSWER>
    </FAQ>

    <FAQ>
        <QUESTION id="2">1023 Error Message</QUESTION>
        <GUIDE><b>This is the guide to answer to error 1023.</b></GUIDE>
        <ANSWER>This is the answer to error 1023.</ANSWER>
    </FAQ>

</CUSTOMER>

And here is my XSLT:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0"/>
<xsl:template match="/">
      <html>
      <head>
    <script language="javascript">
    {
        function showWindow(x){
            if(document.getElementById(x).style.display == "none"){
                document.getElementById(x).style.display = "block"
            }else{
                document.getElementById(x).style.display = "none"
            }
        }
    }
    </script>
      </head>
      <body>
          <xsl:for-each select="CUSTOMER/FAQ">
        <xsl:variable name="grID" select="generate-id()"/>
        <script type="text/javascript">
        {
            var getID= '<xsl:copy-of select="$grID"/>'
             document.write('<a onclick='showWindow(getID)' href="#"><xsl:value-of select="$grID" /></a>')
             document.write('<div id="' + getID + '" style="display: block">HELLO WORLD</div>')
        }
        </script>
        <br />
             </xsl:for-each>
        </body>
      </html>
</xsl:template>
</xsl:stylesheet>

Hope you can help me out :)

~ Marvine

mhkay · July 9th, 2006, 03:25 AM

Try to create an HTML page by hand that does what you want. Then try to write the XSLT to generate this HTML. If you can't write the HTML, then you have an HTML problem not an XSLT problem (which means you're on the wrong forum). If you can write the HTML, then post it here as the desired output of the transformation.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

mferrer · July 9th, 2006, 10:01 PM

Sorry I think my description was a little vague. Let's look at the line:

<xsl:variable name="grID" select="generate-id()"/>
<script type="text/javascript">
{
var getID= '<xsl:copy-of select="$grID"/>'
document.write('<a onclick='showWindow(getID)' href="#"><xsl:value-of select="$grID" /></a>')

When you open the XML file, you will have two links. If you click on one of them, the corresponding <p> will appear. When you click the second link, it hides/displays the <p> section. However, if you click the first link, it hides/displays the second link rather than the first <p> section. This is because of the current generate-id().

I have tried using <xml:number/> to use it as a counter but the result is still the same.

Now, is there a way to make this work properly? HTML is not the problem but the "counter" is. Imagine I have a hundred of <FAQ> and it only shows/hides the last item.

Please let me know.

mhkay · July 10th, 2006, 02:50 AM

Please tell me what HTML your code is generating, and what HTML you would like it to generate. Then I might be able to help you.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

mferrer · July 10th, 2006, 06:29 PM

Thanks for your reply. Here is what the output should look like and do. When you click "This is line 1", HELLO WORLD should show/hide under it. When you click "This is line 2", HELLO WORLD should show/hide under the second one.

<html>
<head>
    <script language="javascript">
    {
        function showWindow(x){
            if(document.getElementById('window' + x).style.display == "none"){
                document.getElementById('window' + x).style.display = "block"
            }else{
                document.getElementById('window' + x).style.display = "none"
            }
        }
    }
    </script>
    </head>

    <body>
        <a onclick='showWindow(1)' href="#">This is line 1.</a>
        <div id="window1" style="display: none">HELLO WORLD</div>
        <br>
        <a onclick='showWindow(2)' href="#">This is line 1.</a>
        <div id="window2" style="display: none">HELLO WORLD</div>
        <br />
    </body>
</html>

In my files, window1 and window2 are generated with the help of generate-id() function. However, the output of my XML and XSL is different. When you click either the first/second line, the HELLO WORLD would always hide/show under the second line.

I hope this helps a little.

mhkay · July 10th, 2006, 06:50 PM

Instead of having your XSLT generate Javascript which when executed does calls like document.write() to create elements in the HTML page, why not simply have your XSLT generate the HTML elements directly? It's too late at night to do the detail, but you want to replace

<script type="text/javascript">
        {
            var getID= '<xsl:copy-of select="$grID"/>'
             document.write('<a onclick='showWindow(getID)' href="#"><xsl:value-of select="$grID" /></a>')
             document.write('<div id="' + getID + '" style="display: block">HELLO WORLD</div>')
        }
        </script>

with something like

<a onclick="showWindow({position()})" href="#">This is line <xsl:value-of select="position()"/>.</a>
        <div id="{generate-id()}" style="display: none">HELLO WORLD</div>
        <br>

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

mferrer · July 13th, 2006, 11:23 PM

Thanks buddy. It works!!!