0

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 %}
  • 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 May 10 '18 at 14:06
  • Robin -- So this pattern can't be accomplished with Twig templates alone? I had not intended to develop a plugin. – PhilR May 10 '18 at 14:41
  • You can but I would not recommend it, However: we need your code anyway – Robin Schambach May 10 '18 at 14:44
  • 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 May 10 '18 at 14:52
  • 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 May 10 '18 at 14:57
2

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() 
%}
|improve this answer|||||
  • 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 May 10 '18 at 15:33
  • 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 May 10 '18 at 16:10
  • 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 May 10 '18 at 16:19
  • 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 May 10 '18 at 16:22
  • 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 May 10 '18 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.