1

I'm trying to answer my own question in this post Basically, I have a bunch of checkboxes in multiple categories and when clicked, I want to use Ajax to filter the results and show them on the same screen. I'm building up to that incrementally, and starting out by just trying to get the Ajax to work right with a single category filter.

My Ajax looks like this:

$('#filters input').change(function() {
  var value = $(this).val();

  $.ajax("ajax.twig?search=" + value, {
    type: 'get',
    dataType: 'html',
    success : function(html) {
      $("#ajaxresults").html(html)
    },
    error: function(xhr, status, error) {
      alert(xhr.responseText);
    }
  });
});

ajax.twig look like this:

{% set searchTerm = craft.request.getParam('search') %}

{%  set galleries = craft.entries.section("gallery").colors(searchTerm) %}
{% if galleries|length %}

<div class="gallery">
  <ul>
    {% for gallery in galleries.all() %}
      <li>
        <img src="{{ gallery.image[0].url }}" alt="" />
        <h2>{{ gallery.title }}</h2>
      </li>
    {% endfor %}
   </ul>
 </div>

{% endif %}

If I visit ajax.twig?color=red manually in the browser, it works as expected and I see the rendered result. However, the page with the filters using ajax just returns the code inside ajax.twig rather than the result of the query. I've also tried using .load() and .get() and had the same result.

Does anyone know what I'm doing wrong? I've been stuck for days. Thanks in advance.

  • 1
    What happens if you call ‘/ajax’ instead of ‘ajax.twig’ – dmatthams Jun 22 '20 at 22:13
  • The error alert pops up, unfortunately. – Jake1293 Jun 23 '20 at 0:20
  • It sounds like the template is not parsing as Twig - are you sure that ajax.twig is inside the root of your templates directory? – James Smith Jun 23 '20 at 10:32
  • It was not. It was in /templates/gallery/, but after moving it to /templates/ the result is the same. – Jake1293 Jun 23 '20 at 13:09
  • So the ajax.twig file is in the route, and if you make the call to '/ajax' you still get an error? If so check your logs to see if you get any details about the error. – dmatthams Jun 23 '20 at 14:31
1

The path to the ajax file was wrong. I had it as:

$.ajax("templates/ajax?search=" + value, {

when it should have been

$.ajax("ajax?search=" + value, {

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.