Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-09-03T07:35:02.047Z
Answers.Text: 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!
Answers.UserDisplayName: Justin Dekkers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-09-03T07:40:17.383Z
Answers.Text: 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.
Answers.UserDisplayName: Alec Ritson
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-09-03T07:47:34.623Z
Answers.Text: That was the last fix to it :D I'll be trying to get it without reloading now.
Answers.UserDisplayName: Justin Dekkers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-09-02T22:41:18.350Z
Answers.LastActivityDate: 2015-09-03T07:39:33.563Z
Answers.LastEditDate: 2015-09-03T07:39:33.563Z
Answers.UserDisplayName: Alec Ritson
Body: <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>
  
Tags: <entries><forloop><ajax><ordering><sorting>
Title: Sort / Order Entries on select or button click
ThreadText: # 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 `<select>`. I guess I need to use Ajax for this but after a long search I still cant figure it out.
  
  **The Select**
  
  ```
          <select>
              <option value="{% set order = "postDate asc" %}">New - Old</option>
              <option value="{% set order = "postDate desc" %}">Old - New</option>
              <option value="{% set order = "title asc" %}">A-Z</option>
              <option value="{% set order = "title desc" %}">Z-A</option>
          </select>
  
  ```
  
  **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 `<option>` value to append as a query string, so your template could look like this:
  
  ```
  <select id="sortQuery">
   <option value="postDate asc">New - Old</option>
   <option value="postDate desc">Old - New</option>
   <option value="title asc">A-Z</option>
   <option value="title desc">Z-A</option>
  </select>
  
  ```
  
  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](http://api.jquery.com/jquery.ajax/) to either a html template (which contains the sorted results) or even using the [ElementApi](https://github.com/pixelandtonic/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.  
  
  ---
  
  