Question

I’ve created an image gallery and am using the following filters to sort the results displayed on the page:

Which works great and filters as expected, until I navigate to another page within the pagination (.aspx?page=2) and the filter reverts to the default options. I need it to save the selected options and displayed the filtered results accordingly.

Here’s a snippet of the XSLT I’m using, if needed I can post the entire XSLT:

    <xsl:variable name="FF_sortType" select="umbraco.library:RequestForm('sortType')" />
<xsl:variable name="FF_resultsPerPage" select="umbraco.library:RequestForm('resultsPerPage')" />        
<xsl:variable name="FF_details" select="umbraco.library:RequestForm('details')" />    
<xsl:variable name="FF_zoom" select="umbraco.library:RequestForm('zoom')" /> 

<!-- Filter the page results, Images per page, Most Recent/Alphabetical, Details On/Off, Zoom On/Off -->
<form action="#">
  <div class="imageGalleryAlbumFilter">
    <fieldset>
      <label>Images per page:</label>
      <select name="resultsPerPage" id="resultsPerPage" onchange="document.getElementById('BoostMasterForm').submit()" >
        <option value="8">
        <xsl:if test="$FF_resultsPerPage= '8'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        8 </option>
        <option value="20">
        <xsl:if test="$FF_resultsPerPage= '20'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        20 </option>
        <option value="40">
        <xsl:if test="$FF_resultsPerPage= '40'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        40 </option>
        <option value="60">
        <xsl:if test="$FF_resultsPerPage= '60'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        60 </option>
        <option value="80">
        <xsl:if test="$FF_resultsPerPage= '80'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        80 </option>
        <option value="100">
        <xsl:if test="$FF_resultsPerPage= '100'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        100 </option>
      </select>
    </fieldset>
    <fieldset>
      <label>Sort by:</label>
      <select name="sortType" id="sortType" onchange="document.getElementById('BoostMasterForm').submit()" >
        <option value="MostRecent">
        <xsl:if test="$FF_sortType= 'MostRecent'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        Most recent </option>
        <option value="Alphabetical">
        <xsl:if test="$FF_sortType= 'Alphabetical'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        Alphabetical </option>
      </select>
    </fieldset>
    <fieldset>
      <label>Details:</label>
      <select name="details" id="details" onchange="document.getElementById('BoostMasterForm').submit()" >
        <option value="On">
        <xsl:if test="$FF_details= 'On'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        On </option>
        <option value="Off">
        <xsl:if test="$FF_details= 'Off'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        Off </option>
      </select>
    </fieldset>
    <fieldset>
      <label>Zoom:</label>
      <select name="zoom" id="zoom" onchange="document.getElementById('BoostMasterForm').submit()" >
        <option value="On">
        <xsl:if test="$FF_zoom= 'On'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        On </option>
        <option value="Off">
        <xsl:if test="$FF_zoom= 'Off'">
          <xsl:attribute name="selected">selected</xsl:attribute>
        </xsl:if>
        Off </option>
      </select>
    </fieldset>
  </div>
</form>

<script type='text/javascript'>
$(document).ready(function() {
    $("#resultsPerPage").change(function() {
        $("#BoostMasterForm").attr("action", $(this).val());
        $("#BoostMasterForm").submit();
    });
    $("#sortType").change(function() {
        $("#BoostMasterForm").attr("action", $(this).val());
        $("#BoostMasterForm").submit();
    });
    $("#details").change(function() {
        $("#BoostMasterForm").attr("action", $(this).val());
        $("#BoostMasterForm").submit();
    });
    $("#zoom").change(function() {
        $("#BoostMasterForm").attr("action", $(this).val());
        $("#BoostMasterForm").submit();
    });
});​
</script>

If anyone can help it would be greatly appreciated.

Cheers, JV

Answer 1

The umbraco.library static class has a bunch of helpers for managing session & other variables. As you are navigating using a querystring, the form is not submitted, and your controls inside XSLT do not have viewstate – the ability to retain their values between page submissions.

There are two ways around this:

1. Re-code your gallery (or your filter section) as an ASP.NET usercontrol, and enable viewstate on the controls;
2. When changing the form values, manually build a string in Javascript that contains the name and value of each control (or, save the values into a cookie with Javascript). Then, when paginating, either tack the Javascript string on the end of your querystring and retrieve the values using umbraco.library:RequestQueryString("myparam") in you XSLT, or retrieve the values from the cookies using umbraco.library.RequestCookies("myparam") to then determine which form options need making as “selected” when rendering your <select> options.