<p>Okay so you can either do this through ajax or through a page reload, a page reload is going to be much easier, but you can get it to work without reloading the page...</p>

<p><strong>Reloading the page</strong>   </p>

<p>You can basically make it so that when a user selects an option, use jQuery to redirect to the current page and append the <code>&lt;option&gt;</code> value to append as a query string, so your template could look like this:</p>

<pre><code>&lt;select id="sortQuery"&gt;
 &lt;option value="postDate asc"&gt;New - Old&lt;/option&gt;
 &lt;option value="postDate desc"&gt;Old - New&lt;/option&gt;
 &lt;option value="title asc"&gt;A-Z&lt;/option&gt;
 &lt;option value="title desc"&gt;Z-A&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Then, you can do this in your template:</p>

<pre><code>{% set orderJs %}
  $(function(){

    $('#sortQuery').on("change", function(e){

     // Get the value from the select
     var filter = $(this).val();

     // We can use twig because we are setting this in template, if you extracted this to its own file, you would need a different means to output the page url
     document.location.href = '{{ craft.request.getUrl() }}?order=' + filter;

   });

  });
{% endset %}

{# let craft include the script to the end of our template #}
{% includeJs orderJs %}
</code></pre>

<p>Then, in your template file your code could be:</p>

<pre><code>{% set counter = 0 %}

{# Either get the order from the query or use a default #}
{% set order = craft.request.getParam('order', 'title asc')  %}

{% for entry in craft.entries.section('tips').order(order) %}
  {% set counter = counter + 1 %}
  {% include 'includes/tip-blocks' %}
{% endfor %}
</code></pre>

<p>This should then reload the request with the query string, craft will see it and update the response accordingly. I must stress this is untested, but it should work...</p>

<p><strong>Without reloading the page</strong>   </p>

<p>This gets a little more complex and would involve more jQuery/Javascript than craft so I won't go into too much detail about it.</p>

<p>The steps are pretty much the same as above, except within the script tags (where you listen for a select change) you would make an <a href="http://api.jquery.com/jquery.ajax/" rel="nofollow">ajax request</a> to either a html template (which contains the sorted results) or even using the <a href="https://github.com/pixelandtonic/ElementAPI" rel="nofollow">ElementApi</a> plugin to return json (from a template) which you can then iterate over in jQuery and then update your DOM accordingly. </p>

<p>I hope this helps get you on track!</p>

CC BY-SA 3.0
2015-09-03T07:35:02.047Z
This is all i get: `CDbCommand failed while performing the following SQL statement: SQLSTATE [ 42S22 ] : Column not found: 1054 Unknown column ' craft_order ' in ' order clause '` Thanks for the answer though still figuring this one out!
Justin Dekkers
CC BY-SA 3.0
2015-09-03T07:40:17.383Z
Sorry there was an error in the way the entries were fetched, was passing `{{ order }}` as a string when it should have just referenced the variable, I have updated my answer.
Alec Ritson
CC BY-SA 3.0
2015-09-03T07:47:34.623Z
That was the last fix to it :D I'll be trying to get it without reloading now.
Justin Dekkers
CC BY-SA 3.0
2015-09-02T22:41:18.350Z
2015-09-03T07:39:33.563Z
2015-09-03T07:39:33.563Z
Alec Ritson
<p>I have a page on my website were I display alot of entries. Now I want those entries to be sorted by Date, Title etc. I know how to change that hard coded but I want to make it dynamic with a <code>&lt;select&gt;</code>. I guess I need to use Ajax for this but after a long search I still cant figure it out.</p>

<p><strong>The Select</strong></p>

<pre><code>        &lt;select&gt;
            &lt;option value="{% set order = "postDate asc" %}"&gt;New - Old&lt;/option&gt;
            &lt;option value="{% set order = "postDate desc" %}"&gt;Old - New&lt;/option&gt;
            &lt;option value="{% set order = "title asc" %}"&gt;A-Z&lt;/option&gt;
            &lt;option value="{% set order = "title desc" %}"&gt;Z-A&lt;/option&gt;
        &lt;/select&gt;
</code></pre>

<p><strong>The loop</strong></p>

<pre><code>        {% set counter = 0 %}
        {% for entry in craft.entries.section('tips').order('{{ order }}') %}
            {% set counter = counter + 1 %}
            {% include 'includes/tip-blocks' %}
        {% endfor %}
</code></pre>

<p>To make the question short.</p>

<p><strong>Sort entries dynamicly through a select form. Prefer not to reload the page but, it's oke if it does.</strong></p>

<entries><forloop><ajax><ordering><sorting>
Sort / Order Entries on select or button click
# Sort / Order Entries on select or button click

(Asked by: username_0 on 2015-09-02)

I have a page on my website were I display alot of entries. Now I want those entries to be sorted by Date, Title etc. I know how to change that hard coded but I want to make it dynamic with a . I guess I need to use Ajax for this but after a long search I still cant figure it out.
The Select
        
            New - Old
            Old - New
            A-Z
            Z-A
        

The loop
        {% set counter = 0 %}
        {% for entry in craft.entries.section('tips').order('{{ order }}') %}
            {% set counter = counter + 1 %}
            {% include 'includes/tip-blocks' %}
        {% endfor %}

To make the question short.
Sort entries dynamicly through a select form. Prefer not to reload the page but, it's oke if it does.

**Tags:** entries, forloop, ajax, ordering, sorting


---

## 1 answers

### Answer by username_1 on 2015-09-02. Score: 4 | Accepted answer

Okay so you can either do this through ajax or through a page reload, a page reload is going to be much easier, but you can get it to work without reloading the page...
Reloading the page 
You can basically make it so that when a user selects an option, use jQuery to redirect to the current page and append the  value to append as a query string, so your template could look like this:

 New - Old
 Old - New
 A-Z
 Z-A


Then, you can do this in your template:
{% set orderJs %}
  $(function(){

    $('#sortQuery').on("change", function(e){

     // Get the value from the select
     var filter = $(this).val();

     // We can use twig because we are setting this in template, if you extracted this to its own file, you would need a different means to output the page url
     document.location.href = '{{ craft.request.getUrl() }}?order=' + filter;

   });

  });
{% endset %}

{# let craft include the script to the end of our template #}
{% includeJs orderJs %}

Then, in your template file your code could be:
{% set counter = 0 %}

{# Either get the order from the query or use a default #}
{% set order = craft.request.getParam('order', 'title asc')  %}

{% for entry in craft.entries.section('tips').order(order) %}
  {% set counter = counter + 1 %}
  {% include 'includes/tip-blocks' %}
{% endfor %}

This should then reload the request with the query string, craft will see it and update the response accordingly. I must stress this is untested, but it should work...
Without reloading the page 
This gets a little more complex and would involve more jQuery/Javascript than craft so I won't go into too much detail about it.
The steps are pretty much the same as above, except within the script tags (where you listen for a select change) you would make an ajax request to either a html template (which contains the sorted results) or even using the ElementApi plugin to return json (from a template) which you can then iterate over in jQuery and then update your DOM accordingly. 
I hope this helps get you on track!

> **Comments:**
> **username_0**: This is all i get: `CDbCommand failed while performing the following SQL statement: SQLSTATE [ 42S22 ] : Column not found: 1054 Unknown column ' craft_order ' in ' order clause '` Thanks for the answer though still figuring this one out!  
> **username_1**: Sorry there was an error in the way the entries were fetched, was passing `{{ order }}` as a string when it should have just referenced the variable, I have updated my answer.  
> **username_0**: That was the last fix to it :D I'll be trying to get it without reloading now.  

---

