Question

I have created a pagination input that on change will go to the value entered into the input.

It will detect the page range and allow navigation between those pages in that range.
e.g /image-gallery-album-1.aspx?page=3

<form type="get" onchange="return false">
  <div class="pagerUI">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr> 
        <!-- previous page -->
        <xsl:if test="$page &gt; 1">
          <td class="pager-prev"><a class="previous" href="{concat('?page=', $page - 1, $qs)}" title="Previous page">&#8249;</a></td>
        </xsl:if>
        <td>Page</td>
        <td><input type="number" name="page" id="page" min="1" >
          <xsl:choose>
            <xsl:when test="$page=1">
              <xsl:attribute name="value">1</xsl:attribute>
            </xsl:when>
            <xsl:otherwise>
              <xsl:attribute name="value"> <xsl:value-of select="$currentPageNumber" /> </xsl:attribute>
            </xsl:otherwise>
          </xsl:choose>
          <xsl:attribute name="max"> <xsl:value-of select="$numberOfPages"/> </xsl:attribute>
          </input></td>
        <td>of <xsl:value-of select="$numberOfPages"/></td>
        <!-- next page -->
        <xsl:if test="$page * $resultsPerPage &lt; count($matchedNodes)">
          <td class="pager-next"><a class="next" href="{concat('?page=', $page + 1, $qs)}" title="Next page">&#8250;</a></td>
        </xsl:if>
      </tr>
    </table>
  </div>
</form>

However, when I added this to the XSLTSearch code it doesn’t work as the URL loses the search string.

So instead of navigating to: /image-search.aspx?search=football&page=3

It navigates to: /image-search.aspx?page=3 Which doesn’t display any results on that page as it’s missing the search criteria to display the search results.

I tried to change the form and include an “action” that would change the URL to include the search value but I can’t include the input value as it’s dynamic.

For example with the below form if I enter any value into the input the URL updates to following: /image-search.aspx?search=otbra&page= It’s missing the entered number of the input value.

Search form with onchange and action and method post attributes:

<form type="get" onchange="return false">
  <xsl:attribute name="method"> <xsl:text>post</xsl:text> </xsl:attribute>
  <xsl:attribute name="action"> <xsl:text>?search=</xsl:text> <xsl:value-of select="$search"/><xsl:text>&amp;</xsl:text>page= (input value)</xsl:attribute>

Is there some javascript or some way of detecting the value submitted and parsing it into the search string of the URL?

Any assistance would be appreciated. Cheers, JV

Answer 1

NOTE: As comment on your post says the likely issue is with the $qs variable, however here’s an explanation of how you can get Query String values in Umbraco, for reference.

---

In Umbraco you can retrieve a Query string value in XSLT using umbraco.library

So to retrieve the value of search you would call something like:

<xsl:variable name="searchValue" select="umbraco.library:RequestQueryString('search')"/>

This creates a variable called searchValue which you can then use to re-inject the query string value in your url.

Something like this:

<a class="next" href="{concat('?page=', $page + 1, '&amp;search=', $searchValue)}" title="Next page">&#8250;</a>

More information on umbraco.library can be found on the our.umbraco.org site.