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 369 posts 701 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 369 posts 701 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 369 posts 701 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 369 posts 701 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.

Please Sign in or register to post replies

Write your reply to:

Draft