This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

Troiscent
Troiscent

Hello,

I have a partial that list content from a component, that partial is dynamically updated depending on a filter form I have on my page, here is the markup of the page :

<form data-request="onFilter" data-request-update="composant: '.results'">
  <div class="field textfield">
    <label for="filtre">Filtre</label>
    <input type="text" id="filtre" name="filtre" required />
  </div>
  <div class="field submit">
    <button class="btn" type="submit">Envoyer</button>
  </div>
</form>

<div class="results">
  {% partial 'composant' %}
</div>

And the php code from the same page

function onFilter() {
  $this['filtre'] = input('filtre');
}

And here is the code in the refreshed partial

{% if filtre %}
  The filter is : {{ filtre }}
{% endif %}

{% set records = builderList.records %}
{% if records %}
  <div class="row">
    {% for record in records %}
        <article>
          <img src="{{ record.image|media }}" alt="{{ record.title }}" />
          <h3>{{ record.title }}</h3>
          {{ record.content|raw }}
        </article>
    {% endfor %}
  </div>

  {% if records.lastPage > 1 %}
    <ul class="pagination">
      {% if records.currentPage > 1 %}
        <li><a href="{{ this.page.baseFileName|page({ (pageParam): (records.currentPage-1) }) }}">&larr; Prev</a></li>
      {% endif %}

      {% for page in 1..records.lastPage %}
        <li class="{{ records.currentPage == page ? 'active' : null }}">
          <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
        </li>
      {% endfor %}

      {% if records.lastPage > records.currentPage %}
        <li><a href="{{ this.page.baseFileName|page({ (pageParam): (records.currentPage+1) }) }}">Next &rarr;</a></li>
      {% endif %}
    </ul>
  {% endif %}  

{% endif %}

The filter perfectly work, if I fill somtething in the input field and I submit, I can see the content in the {{ filtre }} twig variable. That's OK.

The next step is about pagination, it works, when I click on the pagination item it paginate correctly, the problem is that I lose the value of my input.

My question is : how can I keep the value of my filter by using pagination ? Cause if my user fill something in that input field and then paginate to browse results, they probably want to keep that filter active between different pages.

Thanks for the help

Alex

Last updated

hakjeTech
hakjeTech

I also have the same issue, anyone knows a workaround for this?

hakjeTech
hakjeTech

Anyone, have an update on this?

Troiscent
Troiscent

Hello,

I finally could do this by registering the input in a temporary session.

function onInit() {
$inputs = Input::all();
if(!empty($inputs)) {
    Session::flash('inputs', $inputs);
} else {
    Session::keep(['inputs']);
}
$this['inputs'] = Session::get('inputs');
}

Basically, it check if the input exists, if yes, register the input value in a new flash session. If no, the actual session is conserved for one page refresh. So, when you paginate in the page that have this code, it save your filters. If you go to another page of the websites, it reset them.

$this['inputs'] is here if you want to display the registered values in your form, you can access them with twig by doing

{{ input.name }} // where "name" is the name of one of your input field.

Last updated

1-4 of 4

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.