Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • syn-rg 282 posts 425 karma points
    Feb 28, 2012 @ 07:08
    syn-rg
    0

    Select menu options to choose between 2 child node lists

    I have 2 child node lists. One for "All clients" and one for "National clients".

    How can I get the options selected to display "All clients" and hide "National clients" and vice versa?

    Here's my current XSLT, it's display both lists at the moment:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:uTube.XSLT="urn:uTube.XSLT" xmlns:Designit.VideoEmbed="urn:Designit.VideoEmbed" xmlns:PS.XSLTsearch="urn:PS.XSLTsearch"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets uTube.XSLT Designit.VideoEmbed PS.XSLTsearch ">

    <xsl:output method="xml" omit-xml-declaration="yes" />

    <xsl:param name="currentPage"/>

    <xsl:variable name="documentTypeAlias" select="string('ProjectPage')"/>
    <xsl:template match="/">

    <!-- The fun starts here -->
      <div id="news_filter">
        <form action="#">
        <fieldset>
            <select name="nationalClient" id="newsCategory">
              <option value="allClients">All clients</option>
              <option value="nationalClient">National clients</option>
            </select>
          </fieldset>
      </form>
        </div
      <div id="clients_list_container">
        <ul>
          <!-- Display this list when "All clients" is selected -->
          <xsl:for-each select="$currentPage/ancestor-or-self::root//* [name() = $documentTypeAlias and string(umbracoNaviHide) != '1']">
            <xsl:sort select="@nodeName" order="ascending"/>
            <xsl:if test="string(displayInClientsList) = '1'">
              <li>
                <a href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
                  <img src="{concat(substring-before(clientLogo,'.'), '_thumb_120.jpg')}"/>
                </a>
              </li>
            </xsl:if>
          </xsl:for-each>
          <!-- Display this list when "National clients" is selected -->
          <xsl:for-each select="$currentPage/ancestor-or-self::root//* [name() = $documentTypeAlias and string(umbracoNaviHide) != '1']">
            <xsl:sort select="@nodeName" order="ascending"/>
            <xsl:if test="string(nationalClient) = '1'">
              <li>
                <a href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
                  <img src="{concat(substring-before(clientLogo,'.'), '_thumb_120.jpg')}"/>
                </a>
              </li>
            </xsl:if>
          </xsl:for-each>
        </ul>
      </div>

    </xsl:template>

        
    </xsl:stylesheet>
  • Rob Watkins 343 posts 593 karma points
    Feb 28, 2012 @ 18:31
    Rob Watkins
    0

    Well, this looks like it would be best done client-side, but if you need a server-side solution, you want to do something like:

    <xsl:if test="umbraco.library:RequestForm('nationalClient') = 'allClients'">
    <!-- Display this list when "All clients" is selected -->
    ...
    </xsl:if>
    <xsl:if test="umbraco.library:RequestForm('nationalClient') = 'nationalClient'">
    <!-- Display this list when "National clients" is selected -->
    ...
    </xsl:if>

    You can use RequestQueryString if your form is going to be a GET form.

  • Rob Watkins 343 posts 593 karma points
    Feb 28, 2012 @ 18:33
    Rob Watkins
    1

    Actually, thinking about it, you will want to deal with no postbacks as well, so you actually want:

     

    <xsl:choose>
        <xsl:when test="umbraco.library:RequestForm('nationalClient') = 'nationalClient'">
            <!-- Display this list when "National clients" is selected -->
            ...
        </xsl:when>
        <xsl:otherwise>
            <!-- Display this list when "All clients" is selected, or no postback -->
            ...
        </xsl:otherwise>
    </xsl:choose>
  • syn-rg 282 posts 425 karma points
    Feb 29, 2012 @ 02:18
    syn-rg
    0

    Thanks Rob I thought it would involve a "choose" tag.

    I still need help with the select menu though, and the form. Can anyone help with this?

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:uTube.XSLT="urn:uTube.XSLT" xmlns:Designit.VideoEmbed="urn:Designit.VideoEmbed" xmlns:PS.XSLTsearch="urn:PS.XSLTsearch"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets uTube.XSLT Designit.VideoEmbed PS.XSLTsearch ">

    <xsl:output method="xml" omit-xml-declaration="yes" />

    <xsl:param name="currentPage"/>

    <xsl:variable name="documentTypeAlias" select="string('ProjectPage')"/>
    <xsl:template match="/">

    <!-- The fun starts here -->
        <form action="#">
      <div id="news_filter">
        <fieldset>
            <select name="nationalClient" id="newsCategory">
              <option value="allClients">All clients</option>
              <option value="nationalClient">National clients</option>
            </select>
          </fieldset>
      </form>
        </div>  
      <div id="clients_list_container">
        <ul>
          <xsl:choose>
            <xsl:when test="umbraco.library:RequestForm('nationalClient') = 'nationalClient'">
              <!-- Display this list when "National clients" is selected -->
              <xsl:for-each select="$currentPage/ancestor-or-self::root//* [name() = $documentTypeAlias and string(umbracoNaviHide) != '1']">
                <xsl:sort select="@nodeName" order="ascending"/>
                <xsl:if test="string(nationalClient) = '1'">
                  <li>
                    <a href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
                      <img src="{concat(substring-before(clientLogo,'.'), '_thumb_120.jpg')}"/>
                    </a>
                  </li>
                </xsl:if>
              </xsl:for-each>
            </xsl:when>
            <xsl:otherwise>
              <!-- Display this list when "All clients" is selected -->
              <xsl:for-each select="$currentPage/ancestor-or-self::root//* [name() = $documentTypeAlias and string(umbracoNaviHide) != '1']">
                <xsl:sort select="@nodeName" order="ascending"/>
                <xsl:if test="string(displayInClientsList) = '1'">
                  <li>
                    <a href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
                      <img src="{concat(substring-before(clientLogo,'.'), '_thumb_120.jpg')}"/>
                    </a>
                  </li>
                </xsl:if>
              </xsl:for-each>
            </xsl:otherwise>
          </xsl:choose>
        </ul>
      </div>

    </xsl:template>

        
    </xsl:stylesheet>
  • Rob Watkins 343 posts 593 karma points
    Feb 29, 2012 @ 11:01
    Rob Watkins
    0

    What help do you need? :o)

  • Alex Burr 77 posts 128 karma points
    Feb 29, 2012 @ 22:51
    Alex Burr
    0

    It seems like you're building a form where:

    1. user selects either All Clients or National Clients
    2. the form posts back to the page with the appropriate list

    That aside, I'm not sure "#" is a valid form action? You might need to tell it explicitly to post back to the current page.

    Also, is there a reason you've named the form field the same as the option value? (nationalClient)

  • syn-rg 282 posts 425 karma points
    Mar 01, 2012 @ 01:20
    syn-rg
    0

    In the end I used JQuery to achieve this. Would still like to know how to do it with XSLT and a form action.

    But this method works well for me this time:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:uTube.XSLT="urn:uTube.XSLT" xmlns:Designit.VideoEmbed="urn:Designit.VideoEmbed" xmlns:PS.XSLTsearch="urn:PS.XSLTsearch"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets uTube.XSLT Designit.VideoEmbed PS.XSLTsearch ">

    <xsl:output method="xml" omit-xml-declaration="yes" />

    <xsl:param name="currentPage"/>

    <xsl:variable name="documentTypeAlias" select="string('ProjectPage')"/>
    <xsl:template match="/">

    <!-- Select menu -->
      <fieldset>
        <select id="clients">
          <option value="all_clients">All clients</option>
          <option value="national_clients">National clients</option>
        </select>
      </fieldset>
      <div id="clients_list_container">
        <ul>
          <!-- Display this list when "National clients" is selected -->
          <div id="national_clients">
            <xsl:for-each select="$currentPage/ancestor-or-self::root//* [name() = $documentTypeAlias and string(umbracoNaviHide) != '1']">
              <xsl:sort select="@nodeName" order="ascending"/>
              <xsl:if test="string(nationalClient) = '1'">
                <li class="national_clients">
                  <a href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
                    <img src="{concat(substring-before(clientLogo,'.'), '_thumb_120.jpg')}"/>
                  </a>
                </li>
              </xsl:if>
            </xsl:for-each>
          </div>
          <!-- Display this list when "All clients" is selected -->
          <div id="all_clients">
            <xsl:for-each select="$currentPage/ancestor-or-self::root//* [name() = $documentTypeAlias and string(umbracoNaviHide) != '1']">
              <xsl:sort select="@nodeName" order="ascending"/>
              <xsl:if test="string(displayInClientsList) = '1'">
                <li class="all_clients">
                  <a href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
                    <img src="{concat(substring-before(clientLogo,'.'), '_thumb_120.jpg')}"/>
                  </a>
                </li>
              </xsl:if>
            </xsl:for-each>
          </div>
        </ul>
      </div>

        <script type="text/javascript">
          $(document).ready(function(){
          $('#all_clients').hide();
          $('#national_clients').hide();
          $("#clients").change(function(){
          if(this.value == 'all')
          {$("#clients_list_container").children().show();}
          else
          {$("#" + this.value).show().siblings().hide();}
          });
          $("#clients").change();
          });
        </script>
      
    </xsl:template>

        
    </xsl:stylesheet>
  • Rob Watkins 343 posts 593 karma points
    Mar 01, 2012 @ 10:34
    Rob Watkins
    0

    If you leave the form action blank then it will post back to the current page URL; I would assume that the hash will maintain that behaviour as it shouldn't affect server behaviour at all.

    As shown above a server side solution is missing one major thing and one possible thing:

    1. You have no submit button, so unless you have a change event handler set up in other code that submits the form you'll never get a postback.

    2. I seem to recall that the default method for forms if no specified is actually GET, so you'll eithre need to change my example to use umbraco.library:RequestQueryString or you'll have to add method="post" to your form tag.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies