Using XSLT create href to id based to attribute

Question

I want to create a bootstrap accordion menu using xslt and read data from xml file. I have this xslt

  <xsl:template match="/Settings">
<xsl:for-each select="Area">
    <div class="panel-group configuration-menu-style" id="Menu">
      <div class="panel panel-default">
          <div class="panel-heading">
              <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#Menu" href="#{@Caption}">
                     <xsl:value-of select="@Caption"/>
                  </a>
              </h4>
          </div>
          <div id="{@Caption}" class="panel-collapse collapse in">
              <div class="panel-body custom-padding">
                  <table class="table">
                    <xsl:for-each select="Category">
                      <tr>
                          <td class="configuration-submenu-style">
                             <xsl:value-of select="@Caption"/>
                          </td>
                      </tr>
                    </xsl:for-each>
                  </table>
              </div>
          </div>
      </div>    
  </div>
</xsl:for-each>

In this line

<div id="{@Caption}" class="panel-collapse collapse in">

i give id based to attribute and works. Using developer tools in browser i can see that has id="MENU OPTION2" The problem is in this line

<a data-toggle="collapse" data-parent="#Menu" href="#{@Caption}">
   <xsl:value-of select="@Caption"/>
</a>

Using developer tools in browser i can see that this element has href="#MENU%20OPTION2

So... how can remove %20 from href?

SOLUTION

<a data-toggle="collapse" data-parent="#Menu" href="#{position()}">

 <div id="{position()}" class="panel-collapse collapse in">

BECAUSE 'id="MENU OPTION2" is not valid as id should not contain space'

`id` should not contain spaces http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Charles-Édouard Coste, Oct 19 '16 at 11:16
`id="{position()}"` is not a valid id either, you should better use some letters as prefix: `id="menu-item-#{position()}"` — Charles-Édouard Coste, Oct 19 '16 at 11:25

score 1 · Answer 1 · edited May 23 '17 at 10:27

id="MENU OPTION2" is not valid as id should not contain spaces

Just have a look at this: What are valid values for the id attribute in HTML?

So I suggest you use "MENU_OPTION2" or "MENU-OPTION2" as there would be no difference when urlencoding those strings.

-- EDIT --

By the way, I just remembered that I already worked on this kind of subject long time ago... http://xul.ccoste.fr/

And if you have a look as my XSLT file http://xul.ccoste.fr/xul-bootstrap.xsl, I used generate-id() to be sure that there would never be any conflict between IDs.

<xsl:template match="tabs">
<ul class="nav nav-tabs">
  <xsl:for-each select="tab">
      <li>
        <xsl:if test="position() = 1">
          <xsl:attribute name="class"><xsl:text>active</xsl:text></xsl:attribute>
        </xsl:if>
        <a data-toggle="tab" href="#{generate-id(../..)}-{position()}">
          <xsl:value-of select="@label" />
        </a>
      </li>
  </xsl:for-each>
</ul>

yes! you are right. I use position() and i created that i want! — GomuGomuNoRocket, Oct 19 '16 at 11:22

Using XSLT create href to id based to attribute

1 Answers1