Answers.Body: <p>Here is what I did in my blog index: </p>
  
  <pre><code>        {% paginate craft.entries.section('blog').limit(1) as pageInfo, blogEntries %}
  
          &lt;div id="post-output"&gt;
  
              {% for entry in blogEntries %}
                  &lt;article&gt;
                      &lt;h3&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h3&gt;
                      &lt;p&gt;Posted on {{ entry.postDate.format('F d, Y') }}&lt;/p&gt;
                      &lt;p&gt;&lt;a href="{{ entry.url }}"&gt;Continue reading&lt;/a&gt;&lt;/p&gt;
                  &lt;/article&gt;
              {% endfor %}
  
          &lt;/div&gt;
  
          {% set numOfpages = pageInfo.totalPages %}
  
          &lt;button id="more-button" data-page="{{craft.app.request.pageNum()}}" data-batch="1" data-total="{{ numOfpages}}"&gt;Load More&lt;/button&gt;
  </code></pre>
  
  <p>and in my javascript: </p>
  
  <pre><code>$("#more-button").on('click', function () {
  var btn = $(this),
      page = btn.data('page'),
      batch = btn.data('batch'),
      total = btn.data('total'),
      offset = page * batch,
      newPage = page + 1;
  
  console.log(newPage);
  console.log(total);
  
  if ( newPage &lt;= total ) {
  
      loadPosts(offset, batch);
      // set the buttons page attribute to the new page it is on.
      btn.data('page',newPage);
  }
  
  if ( newPage == total ) {
      $('#more-button').hide();
  }
  
  });
  
  function loadPosts (offset, limit) {
  $.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
      var postOutput = $('#post-output');
      postOutput.append(data);
  });
  }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-19T15:40:25.570Z
Answers.LastActivityDate: 2018-04-19T15:40:25.570Z
Answers.UserDisplayName: Danielle Frappier
Body: <p>I am use a load more button in place of pagination. I just using jquery and ajax using this <a href="https://craftcms.stackexchange.com/questions/18167/show-more-entries-on-click">post</a> as a starting point.</p>
  
  <p>The problem I'm having is how to hide the button when there is no more posts to show. I thought I could do this with pagination but its not working out.  </p>
  
  <p>Here is my blog index:</p>
  
  <pre><code>            {% paginate craft.entries.section('blog').limit(2) as pageInfo, blogEntries %}
  
          &lt;div id="post-output"&gt;
  
              {% for entry in blogEntries %}
                  &lt;article&gt;
                      &lt;h3&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h3&gt;
                      &lt;p&gt;Posted on {{ entry.postDate.format('F d, Y') }}&lt;/p&gt;
                      &lt;p&gt;&lt;a href="{{ entry.url }}"&gt;Continue reading&lt;/a&gt;&lt;/p&gt;
                  &lt;/article&gt;
              {% endfor %}
  
          &lt;/div&gt;
  
          {% if pageInfo.nextUrl %}
  
              &lt;button id="more-button" data-page="{{craft.request.getPageNum()}}" data-batch="2"&gt;Load More&lt;/button&gt;
  
          {% endif %}
  </code></pre>
  
  <p>Here is my javascript:</p>
  
  <pre><code>import $ from 'jquery';
  
  $("#more-button").on('click', function () {
  var btn = $(this),
      page = btn.data('page'),
      batch = btn.data('batch'),
      offset = page * batch,
      newPage = page + 1;
  
  loadPosts(offset, batch);
  // set the buttons page attribute to the new page it is on.
  btn.data('page',newPage);
  
  console.log('page');
  console.log(newPage);
  });
  
  function loadPosts (offset, limit) {
  $.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
      var postOutput = $('#post-output');
      postOutput.append(data);
  });
  }
  </code></pre>
  
  <p>and here is the ajax/_posts:</p>
  
  <pre><code>{% set offset = craft.app.request.getParam('offset') %}
  {% set limit = craft.app.request.getParam('limit') %}
  {% set moreitems = craft.entries.section('blog').limit(limit).offset(offset).all() %}
  
  {% for entry in moreitems %}
  &lt;article&gt;
      &lt;h3&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/h3&gt;
      &lt;p&gt;Posted on {{ entry.postDate.format('F d, Y') }}&lt;/p&gt;
      &lt;p&gt;&lt;a href="{{ entry.url }}"&gt;Continue reading&lt;/a&gt;&lt;/p&gt;
  &lt;/article&gt;
  {% endfor %}
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-18T14:16:54.857Z
Comments.Text: I can't think of clean way to do this without PHP. You could eventually return a hidden input field with the remaining number of elements and check this input value with javascript after you appended the html but I'm not really a friend of avoiding PHP for certain reasons. The other way would be to check the lenght of `data` and hide the container if it's 0
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-18T16:43:13.437Z
Comments.Text: @RobinSchambach your comment gave me an idea. here is what I did in my blog index: `{% set numOfpages = pageInfo.totalPages %}
     
  <button id="more-button" data-page="{{craft.app.request.pageNum()}}" data-batch="2" data-total="{{ numOfpages}}">Load More</button>`
Comments.UserDisplayName: Danielle Frappier
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-18T16:45:56.827Z
Comments.Text: and in the javascript: `$("#more-button").on('click', function () {
      var btn = $(this),
          page = btn.data('page'),
          batch = btn.data('batch'),
          total = btn.data('total'),
          offset = page * batch,
          newPage = page + 1;
      if ( newPage <= total ) {
          loadPosts(offset, batch);
          btn.data('page',newPage);
      }
      if ( newPage == total ) {
          $('#more-button').hide();
      }
  });
Comments.UserDisplayName: Danielle Frappier
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-18T20:52:09.327Z
Comments.Text: @DanielleFrappier if that solution worked for you, would you mind adding that as an official answer?
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-19T15:40:04.750Z
Comments.Text: Sure no problem
Comments.UserDisplayName: Danielle Frappier
Tags: <ajax><pagination>
Title: When to hide show more button
ThreadText: # When to hide show more button
  
  (Asked by: username_0 on 2018-04-18)
  
  I am use a load more button in place of pagination. I just using jquery and ajax using this [post](https://craftcms.stackexchange.com/questions/18167/show-more-entries-on-click) as a starting point.
  
  The problem I'm having is how to hide the button when there is no more posts to show. I thought I could do this with pagination but its not working out.
  
  Here is my blog index:
  
  ```
              {% paginate craft.entries.section('blog').limit(2) as pageInfo, blogEntries %}
  
          <div id="post-output">
  
              {% for entry in blogEntries %}
                  <article>
                      <h3><a href="{{ entry.url }}">{{ entry.title }}</a></h3>
                      <p>Posted on {{ entry.postDate.format('F d, Y') }}</p>
                      <p><a href="{{ entry.url }}">Continue reading</a></p>
                  </article>
              {% endfor %}
  
          </div>
  
          {% if pageInfo.nextUrl %}
  
              <button id="more-button" data-page="{{craft.request.getPageNum()}}" data-batch="2">Load More</button>
  
          {% endif %}
  
  ```
  
  Here is my javascript:
  
  ```
  import $ from 'jquery';
  
  $("#more-button").on('click', function () {
  var btn = $(this),
      page = btn.data('page'),
      batch = btn.data('batch'),
      offset = page * batch,
      newPage = page + 1;
  
  loadPosts(offset, batch);
  // set the buttons page attribute to the new page it is on.
  btn.data('page',newPage);
  
  console.log('page');
  console.log(newPage);
  });
  
  function loadPosts (offset, limit) {
  $.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
      var postOutput = $('#post-output');
      postOutput.append(data);
  });
  }
  
  ```
  
  and here is the ajax/\_posts:
  
  ```
  {% set offset = craft.app.request.getParam('offset') %}
  {% set limit = craft.app.request.getParam('limit') %}
  {% set moreitems = craft.entries.section('blog').limit(limit).offset(offset).all() %}
  
  {% for entry in moreitems %}
  <article>
      <h3><a href="{{ entry.url }}">{{ entry.title }}</a></h3>
      <p>Posted on {{ entry.postDate.format('F d, Y') }}</p>
      <p><a href="{{ entry.url }}">Continue reading</a></p>
  </article>
  {% endfor %}
  
  ```
  
  **Tags:** ajax, pagination
  
  > **Comments:**
  > **username_1**: I can't think of clean way to do this without PHP. You could eventually return a hidden input field with the remaining number of elements and check this input value with javascript after you appended the html but I'm not really a friend of avoiding PHP for certain reasons. The other way would be to check the lenght of `data` and hide the container if it's 0  
  > **username_0**: @username_1 your comment gave me an idea. here is what I did in my blog index: `{% set numOfpages = pageInfo.totalPages %}     <button id="more-button" data-page="{{craft.app.request.pageNum()}}" data-batch="2" data-total="{{ numOfpages}}">Load More</button>`  
  > **username_0**: and in the javascript: `$("#more-button").on('click', function () {     var btn = $(this),         page = btn.data('page'),         batch = btn.data('batch'),         total = btn.data('total'),         offset = page * batch,         newPage = page + 1;     if ( newPage <= total ) {         loadPosts(offset, batch);         btn.data('page',newPage);     }     if ( newPage == total ) {         $('#more-button').hide();     } });  
  > **username_2**: @username_0 if that solution worked for you, would you mind adding that as an official answer?  
  > **username_0**: Sure no problem  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2018-04-19. Score: 1
  
  Here is what I did in my blog index:
  
  ```
          {% paginate craft.entries.section('blog').limit(1) as pageInfo, blogEntries %}
  
          <div id="post-output">
  
              {% for entry in blogEntries %}
                  <article>
                      <h3><a href="{{ entry.url }}">{{ entry.title }}</a></h3>
                      <p>Posted on {{ entry.postDate.format('F d, Y') }}</p>
                      <p><a href="{{ entry.url }}">Continue reading</a></p>
                  </article>
              {% endfor %}
  
          </div>
  
          {% set numOfpages = pageInfo.totalPages %}
  
          <button id="more-button" data-page="{{craft.app.request.pageNum()}}" data-batch="1" data-total="{{ numOfpages}}">Load More</button>
  
  ```
  
  and in my javascript:
  
  ```
  $("#more-button").on('click', function () {
  var btn = $(this),
      page = btn.data('page'),
      batch = btn.data('batch'),
      total = btn.data('total'),
      offset = page * batch,
      newPage = page + 1;
  
  console.log(newPage);
  console.log(total);
  
  if ( newPage <= total ) {
  
      loadPosts(offset, batch);
      // set the buttons page attribute to the new page it is on.
      btn.data('page',newPage);
  }
  
  if ( newPage == total ) {
      $('#more-button').hide();
  }
  
  });
  
  function loadPosts (offset, limit) {
  $.get('/ajax/posts', { offset:offset, limit:limit }, function (data) {
      var postOutput = $('#post-output');
      postOutput.append(data);
  });
  }
  
  ```
  
  
  ---
  
  