[xsl] Container HTML around recursive collection

[divaqs at yahoo dot com]

Hi XSL-List,

I am afraid that I am a newbie to the list. After browsing your archives and FAQ it appears you are the people to come to with my question. Please include my email address in your responses (divaqs@yahoo.com).

I am attempting to write some recursive XSL to iterate through XML containing site navigation data. The reason it is recursive is to allow for unlimited levels of sub-menus.

The issue I am struggling with is how to enclose my collections of items within their own DIV HTML. For such knowledgeable people as yourselves this may seem like a simple problem that is easily solved, but this is something I have been struggling with for most of today. I really would appreciate any direction you might have.

An outline of the intended XSL functionality is:
  A) Build first level of items
  B) If first level item has child items then call DIV template
  C) DIV template creates submenu DIV and lists child items by calling Item template for childnode
  D) Child items are created in item template
  E) If Child item has its own child items then recursively call DIV template again

Resulting HTML is hoped to look something like this:
<Master Table>
  <Level 1 Table>
    Item
  </Level 1 Table>
  <Level 1 Table>
    Item with childnodes
  </Level 1 Table>
    <DIV>
      <Level 2 Table>
        Item
      </Level 2 Table>
      <Level 2 Table>
        Item
      </Level 2 Table>
    </DIV>
</Master Table>

Actual Resulting HTML looks something like this:
<Master Table>
  <Level 1 Table>
    Item
  </Level 1 Table>
  <Level 1 Table>
    Item with childnodes
  </Level 1 Table>
    <DIV>
      <Level 2 Table>
        Item
      </Level 2 Table>
    </DIV> <---------------------This should not be here
    <DIV> <---------------------This should not be here
      <Level 2 Table>
        Item
      </Level 2 Table>
    </DIV>
</Master Table>

HELP!!!! I am desperate and extremely frustrated. 

Here is a copy of the XSL:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
  
  <!-- Begin Parent Table and TableRow -->
  <xsl:template match="/">
  <TABLE class="menu" id="leftnav" border="0" cellpadding="0" cellspacing="0" style="background-color:#deefff;" width="146px">
    <xsl:attribute name="onmouseout">if (document.readyState=='complete') if (!leftnav.contains(window.event.toElement)) {removePopup(this);}</xsl:attribute>
    <TR valign="top">
      <TD width="5"><IMG src="/images/Trans.gif" height="7" width="5" /></TD>
      <TD class="menuTD" valign="top">
        <!-- Begin Call Tier1 Template -->
          <xsl:call-template name="Tier1">
            <xsl:with-param name="item" select="globalmenu/menu/item" />
          </xsl:call-template>
        <!-- End Call Tier1 Template -->
      </TD>
    </TR>
  </TABLE>
  </xsl:template>
  <!-- End Parent Table and TableRow -->
  
  <!-- Begin the Tier1 Template -->
  <xsl:template name="Tier1">
    <xsl:param name="item" />
    <xsl:for-each select="$item">
      <TABLE>
      <!-- Set Table Attributes -->
      <xsl:attribute name="ID">ID_<xsl:value-of select="@id" /></xsl:attribute>
      <!-- Children Conditionals -->
      <xsl:attribute name="class"><xsl:choose>
        <xsl:when test="./item">menuBar</xsl:when>
        <xsl:otherwise>InactiveMenuBar</xsl:otherwise>
      </xsl:choose></xsl:attribute>
      <xsl:attribute name="onmouseover"><xsl:choose>
        <xsl:when test="./item">rollon(this); popup(ID_<xsl:value-of select="@id" />);</xsl:when>
        <xsl:otherwise>rollon(this);</xsl:otherwise>
      </xsl:choose></xsl:attribute>
      <xsl:attribute name="onmouseout"><xsl:choose>
        <xsl:when test="./item">if (!ID_<xsl:value-of select="@id" />.contains(window.event.toElement) &amp;&amp; !DIV<xsl:value-of select="./item/@id" />.contains(window.event.toElement)) {rolloff(this);cancelPopup();</xsl:when>
        <xsl:otherwise>rolloff(this); cancelPopup();</xsl:otherwise>
      </xsl:choose></xsl:attribute>
      <!-- URL Conditional -->
      <xsl:attribute name="onclick"><xsl:if test="@url != ''">javascript:location.href='<xsl:value-of select="@url" />'</xsl:if></xsl:attribute>
      <!-- Begin Test for Name -->
      <xsl:choose>
        <xsl:when test="@name != ''">
          <TR>
            <TD width="5"><img src="/images/Trans.gif" height="1" width="5" border="0" /></TD>
            <TD align="left" width="100%" class="menuBarFont"><xsl:value-of select="@name" /></TD>
            <xsl:if test="./item">
              <TD width="20" align="RIGHT"><img id="arrow" src="images/nav_arrow.gif" width="4" height="7" align="right" /></TD>
            </xsl:if>
          </TR>
        </xsl:when>
        <xsl:otherwise>
          <TR><TD><BR /></TD></TR>
        </xsl:otherwise>
      </xsl:choose>
      <!-- End Test for Name -->
    </TABLE>
    <!-- Call SubTemplate 'DIV' (If children exist) -->
      <xsl:if test="./item">
        <xsl:for-each select="./item">
        <xsl:call-template name="DIV">
          <xsl:with-param name="item" select="." />
        </xsl:call-template>
        </xsl:for-each>
      </xsl:if>
    <!-- End Call SubTemplate 'DIV' -->
    </xsl:for-each>
  </xsl:template>
  <!-- End Tier1 Template -->
  
  <!-- Begin Item Template -->
  <xsl:template name="Item">
    <xsl:param name="item" />
    <xsl:for-each select="$item">
      <TABLE>
      <!-- Set Table Attributes -->
      <xsl:attribute name="ID">ID_<xsl:value-of select="@id" /></xsl:attribute>
      <!-- Children Conditionals -->
      <xsl:attribute name="class"><xsl:choose>
        <xsl:when test="./item">SubMenu</xsl:when>
        <xsl:otherwise>Inactive</xsl:otherwise>
      </xsl:choose></xsl:attribute>
      <xsl:attribute name="onmouseover"><xsl:choose>
        <xsl:when test="./item">rollon(this); popup(ID_<xsl:value-of select="@id" />);</xsl:when>
        <xsl:otherwise>rollon(this);</xsl:otherwise>
      </xsl:choose></xsl:attribute>
      <xsl:attribute name="onmouseout"><xsl:choose>
        <xsl:when test="./item">if (!ID_<xsl:value-of select="@id" />.contains(window.event.toElement) &amp;&amp; !DIV<xsl:value-of select="./item/@id" />.contains(window.event.toElement)) {rolloff(this);cancelPopup();</xsl:when>
        <xsl:otherwise>if (!ID_<xsl:value-of select="@id" />.contains(window.event.toElement) ) {rolloff(this);cancelDelay()</xsl:otherwise>
      </xsl:choose></xsl:attribute>
      <!-- URL Conditional -->
      <xsl:attribute name="onclick"><xsl:if test="@url != ''">javascript:location.href='<xsl:value-of select="@url" />'</xsl:if></xsl:attribute>
      <!-- Begin Test for Name -->
      <xsl:choose>
        <xsl:when test="@name != ''">
          <TR>
            <TD width="5"><img src="/images/Trans.gif" height="1" width="5" border="0" /></TD>
            <TD align="left" width="100%" class="menuBarFont"><xsl:value-of select="@name" /></TD>
            <xsl:if test="./item">
              <TD width="20" align="RIGHT"><img id="arrow" src="images/nav_arrow.gif" width="4" height="7" align="right" /></TD>
            </xsl:if>
          </TR>
        </xsl:when>
        <xsl:otherwise>
          <TR><TD><BR /></TD></TR>
        </xsl:otherwise>
      </xsl:choose>
      <!-- End Test for Name -->
    </TABLE>
    <!-- Call SubTemplate 'DIV' (If children exist) -->
      <xsl:if test="./item">
        <xsl:for-each select="./item">
        <xsl:call-template name="DIV">
              <xsl:with-param name="item" select="." />
        </xsl:call-template>
        </xsl:for-each>
      </xsl:if>
    <!-- End Call SubTemplate 'DIV' -->
    </xsl:for-each>
  </xsl:template>
  <!-- End Item Template -->
  
  <!-- Begin DIV Template  -->
  <xsl:template name="DIV">
    <xsl:param name="item" />
    <DIV width="90" class="floatingMenu" name="floatingMenu" style="POSITION:absolute;Z-INDEX:15;LEFT:30px;TOP:100px;DISPLAY:none;">
      <xsl:attribute name="ID">DIV<xsl:value-of select="./item/@id" /></xsl:attribute>
      <xsl:attribute name="onmouseout">if(document.readyState=='complete'){if(!leftnav.contains(window.event.toElement)&amp;&amp;!DIV<xsl:value-of select="./item/@id" />.contains(window.event.toElement)){removePopup(this);}if(!DIV<xsl:value-of select="./item/@id" />.contains(window.event.toElement)){rolloff(DIV<xsl:value-of select="@id" />);}}</xsl:attribute>
        <!-- Call SubTemplate 'Item' (If children exist) -->
          <xsl:for-each select=".">
          <xsl:call-template name="Item">
                <xsl:with-param name="item" select="." />
          </xsl:call-template>
          </xsl:for-each>
        <!-- End Call SubTemplate 'Item' -->
    </DIV>
  </xsl:template>
  <!-- End DIV Template -->
  
</xsl:stylesheet>

What is happening is that rather then the collection of menu items (each in their own table) being all enclosed within the DIV, the items instead have a DIV around each of them.

Here is some example XML:
<globalmenu>
   <menu name="Foo Menu" url="">
      <item id="1" url="" name="Foo Information">
        <item id="1_1" url="10025overview.asp" name="Overview" />
        <item id="1_2" url="10025req.asp" name="Foo Requirements" />
        <item id="1_3" url="10025faq.asp" name="Downloadable FAQs" />
        <item id="1_4" url="10025info.asp" name="Foo Information" />
        <item id="1_5" url="10025related.asp" name="Related Foo" />
        <item id="1_7" url="10025features.asp" name="Foo Features" />
      </item>
      <item id="2" url="" name="Foo Tools">
        <item id="2_1" url="/tools.asp?dirID=Pleasure" name="Pleasure" />
        <item id="2_2" url="/tools.asp?dirID=Anti-Foo" name="Anti Foo" />
     </item>
   </menu>
</globalmenu>

Please, please, I really could use some insight on how to get this to work.

Thanks
David S.


 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list