Answers.Body: <p>For filtering entries using JS, you could use <a href="https://isotope.metafizzy.co/filtering.html" rel="nofollow noreferrer">Isotope JS</a></p>
  
  <p>First, in your markup give each entry <code>class</code> attribute representing id of category that entry has:</p>
  
  <pre><code>{% for entry in entries %}
  &lt;a href="{{entry.url}}" class="category-{{entry.categoryField.one().id ?? null}}"&gt;{{entry.title}}&lt;/a&gt;
  {% endfor %}
  </code></pre>
  
  <p>Then, you will be able to show entries related only to a specific category using JS code like this:</p>
  
  <pre><code>$grid.isotope({ filter: '.category-5' });
  </code></pre>
  
  <p>..assuming you defined your isotope grid earlier as <code>$grid</code>. In this example, Isotope will show all entries related to the category with id 5.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-06-18T20:04:42.890Z
Answers.Text: List.js is also a good option for this kind of front-end filtering and sorting: https://listjs.com/
Answers.UserDisplayName: Dalton Rooney
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-06-15T06:45:35.590Z
Answers.LastActivityDate: 2019-06-15T06:45:35.590Z
Answers.UserDisplayName: Piotr Pogorzelski
Answers.Body: <p>The <a href="https://putyourlightson.com/plugins/sprig" rel="nofollow noreferrer">Sprig</a> plugin makes this rather straightforward to achieve. Any time the category is changed, the component will re-render itself and display the resulting entries.</p>
  <pre><code>{{ sprig('_components/filteredEntries') }}
  
  {{ sprig.script }}
  </code></pre>
  <pre><code>{#--- _components/filteredEntries ---#}
  
  {% set categoryId = categoryId ?? '' %}
  
  &lt;select sprig name=&quot;categoryId&quot;&gt;
      &lt;option value=&quot;&quot;&gt;All categories&lt;/option&gt;
      {% for category in craft.categories.all() %}
           &lt;option value=&quot;{{ category.id }}&quot; {{ category.id == categoryId ? 'selected' }}&gt;{{ category.title }}&lt;/option&gt;
      {% endfor %}
  &lt;/select&gt;
  
  
  {% for entry in craft.entries.relatedTo(categoryId).all() %}
      {{ entry.title }}
  {% endfor %}
  </code></pre>
  <p>See more code examples in the <a href="https://putyourlightson.com/sprig-cookbook" rel="nofollow noreferrer">Sprig cookbook</a>.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-10-14T08:25:21.390Z
Answers.LastActivityDate: 2020-10-14T08:32:12.933Z
Answers.LastEditDate: 2020-10-14T08:32:12.933Z
Answers.UserDisplayName: Ben Croker
Answers.Body: <p>Yes, you can do this if you use the Craft Ajaxinate plugin. Here's how: <a href="https://github.com/Hestabit/craft-ajaxinate/blob/master/README.md" rel="nofollow noreferrer">Filtering Entries</a> in Craft CMS.</p>
  <p>If you want to do it by yourself, you have to use the Ajax to toggle the data on user input.</p>
  <p>You have to create a small plugin or module and use the controller to handle the ajax call.</p>
  <p>In Craft Cms there is no inbuilt method available for the frontend to fire the ajax.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-09-21T18:18:31.937Z
Answers.LastActivityDate: 2020-10-15T06:21:39.440Z
Answers.LastEditDate: 2020-10-15T06:21:39.440Z
Answers.UserDisplayName: inrsaurabh
Body: <p>How would I sort blog entries displayed using AJAX?</p>
  
  <p>What I want to achieve is initially show all posts from a channel (All) but then let my users sort through these posts with a sub navigation using the categories I've applied to the channel entries.</p>
  
  <p>I can doing basic templating in CraftCMS but there seems to be very little clear documentation on how to this.</p>
  
  <p>Thank you</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-06-13T10:54:43.553Z
Comments.Text: What do you mean by "using AJAX"? Are these entries provided by element API endpoint?
Comments.UserDisplayName: Piotr Pogorzelski
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-06-14T19:40:18.887Z
Comments.Text: Hello, what I mean is filter these category entries without the page reloading. Unsure if "these entries provided by element API endpoint", they are simply entries I've added in Craft. Thank you for asking.
Comments.UserDisplayName: Spheriri
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-06-14T20:13:23.400Z
Comments.Text: "AJAX" implies you are querying some kind of external page. So you are only using javascript to filter entries, yes? And no additional request to any external source. Do these entries need to be filtered without reloading page or can it be with reloading it - no javascript?
Comments.UserDisplayName: Piotr Pogorzelski
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-06-14T20:41:56.370Z
Comments.Text: Ah ok. Yes I'd be making no additional request to any external source, just filtering the entries by the categories that are applied to the entries. I could just load another page with the appropriate entries but I'd prefer to avoid loading another page (believe it's a better UX).
Comments.UserDisplayName: Spheriri
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-06-15T06:02:45.233Z
Comments.Text: Ok, i believe i have enough info.
Comments.UserDisplayName: Piotr Pogorzelski
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-08-21T11:52:54.577Z
Comments.Text: is your problem solved @Spheriri
Comments.UserDisplayName: inrsaurabh
Tags: <templating><categories><ajax><navigation>
Title: Filter entries with AJAX
ThreadText: # Filter entries with AJAX
  
  (Asked by: username_0 on 2019-06-12)
  
  How would I sort blog entries displayed using AJAX?
  
  What I want to achieve is initially show all posts from a channel (All) but then let my users sort through these posts with a sub navigation using the categories I've applied to the channel entries.
  
  I can doing basic templating in CraftCMS but there seems to be very little clear documentation on how to this.
  
  Thank you
  
  **Tags:** templating, categories, ajax, navigation
  
  > **Comments:**
  > **username_1**: What do you mean by "using AJAX"? Are these entries provided by element API endpoint?  
  > **username_0**: Hello, what I mean is filter these category entries without the page reloading. Unsure if "these entries provided by element API endpoint", they are simply entries I've added in Craft. Thank you for asking.  
  > **username_1**: "AJAX" implies you are querying some kind of external page. So you are only using javascript to filter entries, yes? And no additional request to any external source. Do these entries need to be filtered without reloading page or can it be with reloading it - no javascript?  
  > **username_0**: Ah ok. Yes I'd be making no additional request to any external source, just filtering the entries by the categories that are applied to the entries. I could just load another page with the appropriate entries but I'd prefer to avoid loading another page (believe it's a better UX).  
  > **username_1**: Ok, i believe i have enough info.  
  > **username_2**: is your problem solved @username_0  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_1 on 2019-06-15. Score: 2
  
  For filtering entries using JS, you could use [Isotope JS](https://isotope.metafizzy.co/filtering.html)
  
  First, in your markup give each entry `class` attribute representing id of category that entry has:
  
  ```
  {% for entry in entries %}
  <a href="{{entry.url}}" class="category-{{entry.categoryField.one().id ?? null}}">{{entry.title}}</a>
  {% endfor %}
  
  ```
  
  Then, you will be able to show entries related only to a specific category using JS code like this:
  
  ```
  $grid.isotope({ filter: '.category-5' });
  
  ```
  
  ..assuming you defined your isotope grid earlier as `$grid`. In this example, Isotope will show all entries related to the category with id 5.
  
  > **Comments:**
  > **username_3**: List.js is also a good option for this kind of front-end filtering and sorting: https://listjs.com/  
  
  ---
  
  ### Answer by username_4 on 2020-10-14. Score: 2
  
  The [Sprig](https://putyourlightson.com/plugins/sprig) plugin makes this rather straightforward to achieve. Any time the category is changed, the component will re-render itself and display the resulting entries.
  
  ```
  {{ sprig('_components/filteredEntries') }}
  
  {{ sprig.script }}
  
  ```
  
  ```
  {#--- _components/filteredEntries ---#}
  
  {% set categoryId = categoryId ?? '' %}
  
  <select sprig name="categoryId">
      <option value="">All categories</option>
      {% for category in craft.categories.all() %}
           <option value="{{ category.id }}" {{ category.id == categoryId ? 'selected' }}>{{ category.title }}</option>
      {% endfor %}
  </select>
  
  {% for entry in craft.entries.relatedTo(categoryId).all() %}
      {{ entry.title }}
  {% endfor %}
  
  ```
  
  See more code examples in the [Sprig cookbook](https://putyourlightson.com/sprig-cookbook).
  
  
  ---
  
  ### Answer by username_2 on 2019-09-21. Score: 2
  
  Yes, you can do this if you use the Craft Ajaxinate plugin. Here's how: [Filtering Entries](https://github.com/Hestabit/craft-ajaxinate/blob/master/README.md) in Craft CMS.
  
  If you want to do it by yourself, you have to use the Ajax to toggle the data on user input.
  
  You have to create a small plugin or module and use the controller to handle the ajax call.
  
  In Craft Cms there is no inbuilt method available for the frontend to fire the ajax.
  
  
  ---
  
  