<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>

CC BY-SA 4.0
2018-05-10T15:33:31.483Z
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.
PhilR
CC BY-SA 4.0
2018-05-10T16:10:55.260Z
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.
Robin Schambach
CC BY-SA 4.0
2018-05-10T16:19:13.623Z
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.
PhilR
CC BY-SA 4.0
2018-05-10T16:22:41.373Z
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)
Robin Schambach
CC BY-SA 4.0
2018-05-10T16:35:15.197Z
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.
PhilR
CC BY-SA 4.0
2018-05-10T15:07:03.243Z
2018-05-10T15:07:03.243Z
Robin Schambach
<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>

CC BY-SA 4.0
2018-05-10T14:06:42.283Z
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
Robin Schambach
CC BY-SA 4.0
2018-05-10T14:41:56.733Z
Robin -- So this pattern can't be accomplished with Twig templates alone? I had not intended to develop a plugin.
PhilR
CC BY-SA 4.0
2018-05-10T14:44:09.117Z
You can but I would not recommend it, However: we need your code anyway
Robin Schambach
CC BY-SA 4.0
2018-05-10T14:52:18.290Z
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!
PhilR
CC BY-SA 4.0
2018-05-10T14:57:05.520Z
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.
Robin Schambach
CC BY-SA 4.0
2018-05-10T15:02:19.083Z
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.
PhilR
CC BY-SA 4.0
2018-05-10T16:36:09.717Z
Accepting this as answered based on Robin's comments.
PhilR
<ajax>
Ajax query filter for entries
# 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 %}

    
        SPECIES
        
            All
            Dog
            Cat
            Rabbit
            Horse
            Small&Furry
            Pig
            Reptile
            Bird
            Barnyard
            Other than Dog and Cat
        
    
    
        SEX
        
            All
            Male
            Female
        
    
    
        AGE
        
            All
            Over 1 year old
            Under 1 year old
        
    
    
        LOCATION
        
            All
            Adoption Center West
            {#Animals in the Community#}
        
    

{# petSearch non-ajax results #}
{% set entries = craft.entries.section( 'adoptablePetSearch' ).all() %}
    {% for entry in entries %}
        
            {{ entry.title }}
            {{ entry.petName }}
             {{ entry.sex }}
            {{ entry.species }}
        
    {% endfor %}
{# petSearch ajax results #}
    {% block ajaxContent %}
        
    {% endblock %}
{% endblock %}

And the ajax template with the block to update:
{#
template: _petSearch
#}

{% block ajaxContent %}
false
{% 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**: Robin -- 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 Robin'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
{% 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.  

---

