<p>Because of your component's element structure this is slightly more complex. I just added a new recipe to the Sprig cookbook called &quot;Load More Complex&quot; which should provide you with the solution, although you may want to move the button outside of the <code>#results</code> div.
<a href="https://putyourlightson.com/sprig/cookbook#load-more-complex" rel="nofollow noreferrer">https://putyourlightson.com/sprig/cookbook#load-more-complex</a></p>

CC BY-SA 4.0
2021-08-23T19:24:21.410Z
Thanks, the new example is super helpful! I've got entries loading in the correct spot now. The only remaining issue is that `entryQuery.count()` and `offset + entries|length` don't seem to update when the button is clicked–when I reach the end of my entries, the load more button remains. The only way to update those two variables is to select a checkbox filter.
Bryce
CC BY-SA 4.0
2021-08-24T07:44:44.290Z
Using `s-swap-oob` with an ID on the button should swap it out, as explained in the recipe.
Ben Croker
CC BY-SA 4.0
2021-08-24T16:51:50.987Z
Yeah–have all that. Copying all of the code directly from the example still produces this error. When it reaches the end of entries, the Load another still appears and continually loads the last entry (or entries, if the limit is > 1)
Bryce
CC BY-SA 4.0
2021-08-25T06:00:24.127Z
Try the recipe at https://putyourlightson.com/sprig/cookbook#load-more-complex in isolation and you'll see that it does indeed work.
Ben Croker
CC BY-SA 4.0
2021-08-25T15:53:59.433Z
Copied and pasted the code verbatim in an empty template, adding only a section to the entry query. Button still shows and loops the last entries equal to the limit.
Bryce
CC BY-SA 4.0
2021-08-25T18:29:28.410Z
I've updated the recipe with a fix at https://putyourlightson.com/sprig/cookbook#load-more-complex
Ben Croker
CC BY-SA 4.0
2021-08-22T10:03:14.463Z
2021-08-22T10:03:14.463Z
Ben Croker
<p>I have some checkboxes that filter entries by category. All that is working fine on its own. I also have a load more button that is supposed to append additional entries to the query results.</p>
<p>The problem is that it appends <em>everything</em> in the sprig component, including the category filters.</p>
<p><code>_sprig/component</code>:</p>
<pre class="lang-html prettyprint-override"><code>{% set category = craft.categories.id(categoryId).one() %}
{% set industry = industry ?? '' %}
{% set offset = offset ?? 0 %}
{% set limit = 6 %}

{% set relatedTo = ['and', categoryId] %}
{% set relatedTo = industry ? relatedTo|merge(industry) : categoryId %}

&lt;section&gt;
  &lt;div class=&quot;template-types__industry&quot;&gt;
    &lt;p&gt;Industry:&lt;/p&gt;
    &lt;ul&gt;
      {% for indCat in craft.categories.group('templateCategory').all() %}
        &lt;li&gt;
          &lt;input type=&quot;checkbox&quot; id=&quot;{{ indCat.slug }}&quot; value=&quot;{{ indCat.id }}&quot; name=&quot;industry[]&quot; {{ indCat.id in industry ? 'checked' }} sprig&gt;
          &lt;label for=&quot;{{ indCat.slug }}&quot;&gt;{{ indCat.title }}&lt;/label&gt;
        &lt;/li&gt;
      {% endfor %}
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/section&gt;

&lt;section&gt;
  &lt;div class=&quot;row&quot; id=&quot;results&quot;&gt;
    {% set entryQuery = craft.entries
      .section('proposalTemplates')
      .limit(limit)
      .offset(offset)
      .relatedTo(relatedTo)
      .with(['image'])
    %}
    {% set entries = entryQuery.all() %}

    {% if entries|length %}
      {% for template in entries %}
        &lt;div class=&quot;result&quot;&gt;
          {{ template.title }}
        &lt;/div&gt;
      {% endfor %}
    {% endif %}

    {% if entryQuery.count() &gt; offset + entries|length %}
      &lt;button sprig 
        s-val:offset=&quot;{{ offset + limit }}&quot; 
        s-swap=&quot;outerHTML&quot; 
        s-target=&quot;#results&quot;
        class=&quot;template-types__load-more&quot;&gt;
          Load more
      &lt;/button&gt;
    {% endif %}
  &lt;/div&gt;
&lt;/section&gt;
</code></pre>
<p>I've tried breaking the results into a separate sprig component, but then changes made to the filters don't have an effect, even if they're sent as variables:</p>
<p><code>_sprig/results</code>:</p>
<pre class="lang-html prettyprint-override"><code>&lt;section&gt;
  &lt;div class=&quot;row&quot; id=&quot;results&quot;&gt;
    {{ sprig('_sprig/results', with {
      limit: limit,
      offset: offset,
      relatedTo: relatedTo
    }) }}
  &lt;/div&gt;
&lt;/section&gt;
</code></pre>
<p>This should be possible...I just can't figure out a way to set it up properly.</p>

CC BY-SA 4.0
2021-08-19T07:35:20.783Z
Can you post more of your template? How do you build your `relatedTo` variable?
Oli
CC BY-SA 4.0
2021-08-19T15:52:49.410Z
I skipped that stuff because it's all working as expected. Adding now.
Bryce
<plugin-sprig>
Sprig use category filtering AND load more
# Sprig use category filtering AND load more

(Asked by: username_0 on 2021-08-17)

I have some checkboxes that filter entries by category. All that is working fine on its own. I also have a load more button that is supposed to append additional entries to the query results.
The problem is that it appends everything in the sprig component, including the category filters.
_sprig/component:
{% set category = craft.categories.id(categoryId).one() %}
{% set industry = industry ?? '' %}
{% set offset = offset ?? 0 %}
{% set limit = 6 %}

{% set relatedTo = ['and', categoryId] %}
{% set relatedTo = industry ? relatedTo|merge(industry) : categoryId %}


  
    Industry:
    
      {% for indCat in craft.categories.group('templateCategory').all() %}
        
          
          {{ indCat.title }}
        
      {% endfor %}
    
  



  
    {% set entryQuery = craft.entries
      .section('proposalTemplates')
      .limit(limit)
      .offset(offset)
      .relatedTo(relatedTo)
      .with(['image'])
    %}
    {% set entries = entryQuery.all() %}

    {% if entries|length %}
      {% for template in entries %}
        
          {{ template.title }}
        
      {% endfor %}
    {% endif %}

    {% if entryQuery.count() > offset + entries|length %}
      
          Load more
      
    {% endif %}
  


I've tried breaking the results into a separate sprig component, but then changes made to the filters don't have an effect, even if they're sent as variables:
_sprig/results:

  
    {{ sprig('_sprig/results', with {
      limit: limit,
      offset: offset,
      relatedTo: relatedTo
    }) }}
  


This should be possible...I just can't figure out a way to set it up properly.

**Tags:** plugin-sprig

> **Comments:**
> **username_1**: Can you post more of your template? How do you build your `relatedTo` variable?  
> **username_0**: I skipped that stuff because it's all working as expected. Adding now.  

---

## 1 answers

### Answer by username_2 on 2021-08-22. Score: 2 | Accepted answer

Because of your component's element structure this is slightly more complex. I just added a new recipe to the Sprig cookbook called "Load More Complex" which should provide you with the solution, although you may want to move the button outside of the `#results` div.
<https://putyourlightson.com/sprig/cookbook#load-more-complex>

> **Comments:**
> **username_0**: Thanks, the new example is super helpful! I've got entries loading in the correct spot now. The only remaining issue is that `entryQuery.count()` and `offset + entries|length` don't seem to update when the button is clicked–when I reach the end of my entries, the load more button remains. The only way to update those two variables is to select a checkbox filter.  
> **username_2**: Using `s-swap-oob` with an ID on the button should swap it out, as explained in the recipe.  
> **username_0**: Yeah–have all that. Copying all of the code directly from the example still produces this error. When it reaches the end of entries, the Load another still appears and continually loads the last entry (or entries, if the limit is > 1)  
> **username_2**: Try the recipe at https://putyourlightson.com/sprig/cookbook#load-more-complex in isolation and you'll see that it does indeed work.  
> **username_0**: Copied and pasted the code verbatim in an empty template, adding only a section to the entry query. Button still shows and loops the last entries equal to the limit.  
> **username_2**: I've updated the recipe with a fix at https://putyourlightson.com/sprig/cookbook#load-more-complex  

---

