Answers.Body: <p>You need to fetch your URL parameters via</p>
  
  <pre><code>{% set location = craft.app.getRequest().getQueryParam('location') %}
  </code></pre>
  
  <p>you can then include the parameter to your <a href="https://docs.craftcms.com/v3/element-queries.html" rel="nofollow noreferrer">Query</a></p>
  
  <pre><code>{% set entries = craft.entries
      .section( 'adoptablePetSearch' )
      .location(location)
      .all() 
  %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-10T15:33:31.483Z
Answers.Text: Yes, I'm able to filter results of a non-ajax request successfully when including the params (sorry, my original template code was not fleshed out in that regard). I'm still not sure how to proceed with filtering the ajax result or how exactly to get the response data I need for complete display or results with ajax.
Answers.UserDisplayName: PhilR
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-10T16:10:55.260Z
Answers.Text: You can't really "filter" (what does that mean by the way?) the ajax result since you only receive html (because of Twig). The response data is the first parameter in your ajax callback. There are plenty examples here on stack exchange how to fetch elements via ajax.
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-10T16:19:13.623Z
Answers.Text: By "filter" I mean, select entries based on parameters, as with a non-ajax request. Now that I understand Twig cannot return json etc. the limitations of that approach and your earlier explanation makes more sense. Thanks for your patience with explaining this.
Answers.UserDisplayName: PhilR
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-10T16:22:41.373Z
Answers.Text: You can filter your entries the same way like with a normal request. There is no difference. You just have to make sure to grab the correct parameters. You can actually return json but you would have to store all values in a variable rather than templating it normally (it's not recommended either)
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-10T16:35:15.197Z
Answers.Text: Got it. Based on your advice I'm moving forward with a non-ajax solution for now until I can work in some plugin development.
Answers.UserDisplayName: PhilR
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-10T15:07:03.243Z
Answers.LastActivityDate: 2018-05-10T15:07:03.243Z
Answers.UserDisplayName: Robin Schambach
Body: <p>I'm attempting to set up ajax filtering for entries using jquery. I'm setting variables in my js based on form field values. The js is triggerd when there's a change in a form field and then the ajax query is fired. </p>
  
  <pre><code>$('#speciesID, #sex, #site, #ageGroup').change(
      function(){
          var speciesVal = $('#speciesID').val();
          var sexVal = $('#sex').val();
          var locationVal = $('#location').val();
          var ageVal = $('#ageGroup').val();
  
          /* make the ajax call with .ajax */
          $.ajax({
              type: 'get',
              url: '/our-services/adopt',
              data: {species: speciesVal, sex: sexVal, location: locationVal, age: ageVal},
              processData: true,
              success: function(result){$( ".petSearchResult" ).html( result ).show();}
          })
  });
  </code></pre>
  
  <p>I'm having two issues with this approach. 1) The filtering doesn't work; the query returns all entries, regardless of filter data values. 2) The query returns only the entry titles as HTML. When I set the the ajax datatype to 'json' the query returns nothing. I've looked over a number of SE threads related to using ajax to query entries but so far have not been able to piece together a solution. </p>
  
  <p>Here's the base Twig template:</p>
  
  <pre><code>{#
  Template: adopt
  #}
  {% extends craft.app.request.isAjax ? "includes/_petSearch" : "_layout" %}
  {% block content %}
  &lt;form id="adoptablePets"&gt;
      &lt;div&gt;
          &lt;label for="speciesID"&gt;SPECIES&lt;/label&gt;&lt;br&gt;
          &lt;select class="frmInput" name="speciesID" id="speciesID"&gt;
              &lt;option value=""&gt;All&lt;/option&gt;
              &lt;option value="Dog"&gt;Dog&lt;/option&gt;
              &lt;option value="Cat"&gt;Cat&lt;/option&gt;
              &lt;option value="Rabbit"&gt;Rabbit&lt;/option&gt;
              &lt;option value="Horse"&gt;Horse&lt;/option&gt;
              &lt;option value="Small&amp;amp;Furry"&gt;Small&amp;amp;Furry&lt;/option&gt;
              &lt;option value="Pig"&gt;Pig&lt;/option&gt;
              &lt;option value="Reptile"&gt;Reptile&lt;/option&gt;
              &lt;option value="Bird"&gt;Bird&lt;/option&gt;
              &lt;option value="Barnyard"&gt;Barnyard&lt;/option&gt;
              &lt;option value="Other than Dog and Cat"&gt;Other than Dog and Cat&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label for="sex"&gt;SEX&lt;/label&gt;&lt;br&gt;
          &lt;select class="frmInput" name="sex" id="sex"&gt;
              &lt;option value=""&gt;All&lt;/option&gt;
              &lt;option value="Male"&gt;Male&lt;/option&gt;
              &lt;option value="Female"&gt;Female&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label for="age"&gt;AGE&lt;/label&gt;&lt;br&gt;
          &lt;select class="frmInput" name="age" id="age"&gt;
              &lt;option value=""&gt;All&lt;/option&gt;
              &lt;option value="Over 1 year old"&gt;Over 1 year old&lt;/option&gt;
              &lt;option value="Under 1 year old"&gt;Under 1 year old&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label for="location"&gt;LOCATION&lt;/label&gt;&lt;br&gt;
          &lt;select class="frmInput" name="location" id="location"&gt;
              &lt;option value="" selected="selected"&gt;All&lt;/option&gt;
              &lt;option value="Adoption Center West"&gt;Adoption Center West&lt;/option&gt;
              {#&lt;option value="com"&gt;Animals in the Community&lt;/option&gt;#}
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  {# petSearch non-ajax results #}
  {% set entries = craft.entries.section( 'adoptablePetSearch' ).all() %}
      {% for entry in entries %}
          &lt;div&gt;
              &lt;p&gt;{{ entry.title }}&lt;/p&gt;
              &lt;p&gt;{{ entry.petName }}&lt;/p&gt;
              &lt;p&gt; {{ entry.sex }}&lt;/p&gt;
              &lt;p&gt;{{ entry.species }}&lt;/p&gt;
          &lt;/div&gt;
      {% endfor %}
  {# petSearch ajax results #}
      {% block ajaxContent %}
          &lt;div class="petSearchResult"&gt;&lt;/div&gt;
      {% endblock %}
  {% endblock %}
  </code></pre>
  
  <p>And the ajax template with the block to update:</p>
  
  <pre><code>{#
  template: _petSearch
  #}
  
  {% block ajaxContent %}
  &lt;h1&gt;false&lt;/h1&gt;
  {% endblock %}
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-10T14:06:42.283Z
Comments.Text: Could you please share your PHP code? Otherwise we can't provide any help. Besides that your `response` is usually an object that contains certain attributes. You would usually prefer to access one of those instead of the object directly. `response.html` or something
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-10T14:41:56.733Z
Comments.Text: Robin -- So this pattern can't be accomplished with Twig templates alone? I had not intended to develop a plugin.
Comments.UserDisplayName: PhilR
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-10T14:44:09.117Z
Comments.Text: You can but I would not recommend it, However: we need your code anyway
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-10T14:52:18.290Z
Comments.Text: I've added the twig templates and would be interested to know whey the Twig template approach is not recommended in your opinion. Thanks for your generous help!
Comments.UserDisplayName: PhilR
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-10T14:57:05.520Z
Comments.Text: You don't filter your entries at all `{% set entries = craft.entries.section( 'adoptablePetSearch' ).all() %}` You don't apply any attributes nor do you even get your `$_GET` parameters. PHP is better because you have much more control than in Twig. You can return a better formated response value, you can check if the request was successful and display error messages much better than in Twig.
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-10T15:02:19.083Z
Comments.Text: Thanks for the pointers. Just trying to learn how this development pattern works. I'm going try to get this going in Twig if I can.
Comments.UserDisplayName: PhilR
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-10T16:36:09.717Z
Comments.Text: Accepting this as answered based on Robin's comments.
Comments.UserDisplayName: PhilR
Tags: <ajax>
Title: Ajax query filter for entries
ThreadText: # Ajax query filter for entries
  
  (Asked by: username_0 on 2018-05-10)
  
  I'm attempting to set up ajax filtering for entries using jquery. I'm setting variables in my js based on form field values. The js is triggerd when there's a change in a form field and then the ajax query is fired.
  
  ```
  $('#speciesID, #sex, #site, #ageGroup').change(
      function(){
          var speciesVal = $('#speciesID').val();
          var sexVal = $('#sex').val();
          var locationVal = $('#location').val();
          var ageVal = $('#ageGroup').val();
  
          /* make the ajax call with .ajax */
          $.ajax({
              type: 'get',
              url: '/our-services/adopt',
              data: {species: speciesVal, sex: sexVal, location: locationVal, age: ageVal},
              processData: true,
              success: function(result){$( ".petSearchResult" ).html( result ).show();}
          })
  });
  
  ```
  
  I'm having two issues with this approach. 1) The filtering doesn't work; the query returns all entries, regardless of filter data values. 2) The query returns only the entry titles as HTML. When I set the the ajax datatype to 'json' the query returns nothing. I've looked over a number of SE threads related to using ajax to query entries but so far have not been able to piece together a solution.
  
  Here's the base Twig template:
  
  ```
  {#
  Template: adopt
  #}
  {% extends craft.app.request.isAjax ? "includes/_petSearch" : "_layout" %}
  {% block content %}
  <form id="adoptablePets">
      <div>
          <label for="speciesID">SPECIES</label><br>
          <select class="frmInput" name="speciesID" id="speciesID">
              <option value="">All</option>
              <option value="Dog">Dog</option>
              <option value="Cat">Cat</option>
              <option value="Rabbit">Rabbit</option>
              <option value="Horse">Horse</option>
              <option value="Small&amp;Furry">Small&amp;Furry</option>
              <option value="Pig">Pig</option>
              <option value="Reptile">Reptile</option>
              <option value="Bird">Bird</option>
              <option value="Barnyard">Barnyard</option>
              <option value="Other than Dog and Cat">Other than Dog and Cat</option>
          </select>
      </div>
      <div>
          <label for="sex">SEX</label><br>
          <select class="frmInput" name="sex" id="sex">
              <option value="">All</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
          </select>
      </div>
      <div>
          <label for="age">AGE</label><br>
          <select class="frmInput" name="age" id="age">
              <option value="">All</option>
              <option value="Over 1 year old">Over 1 year old</option>
              <option value="Under 1 year old">Under 1 year old</option>
          </select>
      </div>
      <div>
          <label for="location">LOCATION</label><br>
          <select class="frmInput" name="location" id="location">
              <option value="" selected="selected">All</option>
              <option value="Adoption Center West">Adoption Center West</option>
              {#<option value="com">Animals in the Community</option>#}
          </select>
      </div>
  </form>
  {# petSearch non-ajax results #}
  {% set entries = craft.entries.section( 'adoptablePetSearch' ).all() %}
      {% for entry in entries %}
          <div>
              <p>{{ entry.title }}</p>
              <p>{{ entry.petName }}</p>
              <p> {{ entry.sex }}</p>
              <p>{{ entry.species }}</p>
          </div>
      {% endfor %}
  {# petSearch ajax results #}
      {% block ajaxContent %}
          <div class="petSearchResult"></div>
      {% endblock %}
  {% endblock %}
  
  ```
  
  And the ajax template with the block to update:
  
  ```
  {#
  template: _petSearch
  #}
  
  {% block ajaxContent %}
  <h1>false</h1>
  {% endblock %}
  
  ```
  
  **Tags:** ajax
  
  > **Comments:**
  > **username_1**: Could you please share your PHP code? Otherwise we can't provide any help. Besides that your `response` is usually an object that contains certain attributes. You would usually prefer to access one of those instead of the object directly. `response.html` or something  
  > **username_0**: username_1 -- So this pattern can't be accomplished with Twig templates alone? I had not intended to develop a plugin.  
  > **username_1**: You can but I would not recommend it, However: we need your code anyway  
  > **username_0**: I've added the twig templates and would be interested to know whey the Twig template approach is not recommended in your opinion. Thanks for your generous help!  
  > **username_1**: You don't filter your entries at all `{% set entries = craft.entries.section( 'adoptablePetSearch' ).all() %}` You don't apply any attributes nor do you even get your `$_GET` parameters. PHP is better because you have much more control than in Twig. You can return a better formated response value, you can check if the request was successful and display error messages much better than in Twig.  
  > **username_0**: Thanks for the pointers. Just trying to learn how this development pattern works. I'm going try to get this going in Twig if I can.  
  > **username_0**: Accepting this as answered based on username_1's comments.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-05-10. Score: 2 | Accepted answer
  
  You need to fetch your URL parameters via
  
  ```
  {% set location = craft.app.getRequest().getQueryParam('location') %}
  
  ```
  
  you can then include the parameter to your [Query](https://docs.craftcms.com/v3/element-queries.html)
  
  ```
  {% set entries = craft.entries
      .section( 'adoptablePetSearch' )
      .location(location)
      .all() 
  %}
  
  ```
  
  > **Comments:**
  > **username_0**: Yes, I'm able to filter results of a non-ajax request successfully when including the params (sorry, my original template code was not fleshed out in that regard). I'm still not sure how to proceed with filtering the ajax result or how exactly to get the response data I need for complete display or results with ajax.  
  > **username_1**: You can't really "filter" (what does that mean by the way?) the ajax result since you only receive html (because of Twig). The response data is the first parameter in your ajax callback. There are plenty examples here on stack exchange how to fetch elements via ajax.  
  > **username_0**: By "filter" I mean, select entries based on parameters, as with a non-ajax request. Now that I understand Twig cannot return json etc. the limitations of that approach and your earlier explanation makes more sense. Thanks for your patience with explaining this.  
  > **username_1**: You can filter your entries the same way like with a normal request. There is no difference. You just have to make sure to grab the correct parameters. You can actually return json but you would have to store all values in a variable rather than templating it normally (it's not recommended either)  
  > **username_0**: Got it. Based on your advice I'm moving forward with a non-ajax solution for now until I can work in some plugin development.  
  
  ---
  
  