Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-23T19:24:21.410Z
Answers.Text: 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.
Answers.UserDisplayName: Bryce
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-24T07:44:44.290Z
Answers.Text: Using `s-swap-oob` with an ID on the button should swap it out, as explained in the recipe.
Answers.UserDisplayName: Ben Croker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-24T16:51:50.987Z
Answers.Text: 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)
Answers.UserDisplayName: Bryce
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-25T06:00:24.127Z
Answers.Text: Try the recipe at https://putyourlightson.com/sprig/cookbook#load-more-complex in isolation and you'll see that it does indeed work.
Answers.UserDisplayName: Ben Croker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-25T15:53:59.433Z
Answers.Text: 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.
Answers.UserDisplayName: Bryce
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-25T18:29:28.410Z
Answers.Text: I've updated the recipe with a fix at https://putyourlightson.com/sprig/cookbook#load-more-complex
Answers.UserDisplayName: Ben Croker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-22T10:03:14.463Z
Answers.LastActivityDate: 2021-08-22T10:03:14.463Z
Answers.UserDisplayName: Ben Croker
Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-08-19T07:35:20.783Z
Comments.Text: Can you post more of your template? How do you build your `relatedTo` variable?
Comments.UserDisplayName: Oli
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-08-19T15:52:49.410Z
Comments.Text: I skipped that stuff because it's all working as expected. Adding now.
Comments.UserDisplayName: Bryce
Tags: <plugin-sprig>
Title: Sprig use category filtering AND load more
ThreadText: # 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`:
  
  ```html
  {% 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 %}
  
  <section>
    <div class="template-types__industry">
      <p>Industry:</p>
      <ul>
        {% for indCat in craft.categories.group('templateCategory').all() %}
          <li>
            <input type="checkbox" id="{{ indCat.slug }}" value="{{ indCat.id }}" name="industry[]" {{ indCat.id in industry ? 'checked' }} sprig>
            <label for="{{ indCat.slug }}">{{ indCat.title }}</label>
          </li>
        {% endfor %}
      </ul>
    </div>
  </section>
  
  <section>
    <div class="row" id="results">
      {% 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 %}
          <div class="result">
            {{ template.title }}
          </div>
        {% endfor %}
      {% endif %}
  
      {% if entryQuery.count() > offset + entries|length %}
        <button sprig 
          s-val:offset="{{ offset + limit }}" 
          s-swap="outerHTML" 
          s-target="#results"
          class="template-types__load-more">
            Load more
        </button>
      {% endif %}
    </div>
  </section>
  
  ```
  
  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`:
  
  ```html
  <section>
    <div class="row" id="results">
      {{ sprig('_sprig/results', with {
        limit: limit,
        offset: offset,
        relatedTo: relatedTo
      }) }}
    </div>
  </section>
  
  ```
  
  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  
  
  ---
  
  