<p>The path to the ajax file was wrong. I had it as:</p>
<pre><code>$.ajax(&quot;templates/ajax?search=&quot; + value, {
</code></pre>
<p>when it should have been</p>
<pre><code>$.ajax(&quot;ajax?search=&quot; + value, {
</code></pre>

CC BY-SA 4.0
2020-06-24T04:15:49.080Z
2020-06-24T04:15:49.080Z
Jake1293
<p>I'm trying to answer my own question <a href="https://craftcms.stackexchange.com/questions/35626/how-to-filter-by-multiple-checkbox-field-types-with-ajax-edited">in this post</a> 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.</p>
<p>My Ajax looks like this:</p>
<pre><code>$('#filters input').change(function() {
  var value = $(this).val();

  $.ajax(&quot;ajax.twig?search=&quot; + value, {
    type: 'get',
    dataType: 'html',
    success : function(html) {
      $(&quot;#ajaxresults&quot;).html(html)
    },
    error: function(xhr, status, error) {
      alert(xhr.responseText);
    }
  });
});
</code></pre>
<p>ajax.twig look like this:</p>
<pre><code>{% set searchTerm = craft.request.getParam('search') %}

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

&lt;div class=&quot;gallery&quot;&gt;
  &lt;ul&gt;
    {% for gallery in galleries.all() %}
      &lt;li&gt;
        &lt;img src=&quot;{{ gallery.image[0].url }}&quot; alt=&quot;&quot; /&gt;
        &lt;h2&gt;{{ gallery.title }}&lt;/h2&gt;
      &lt;/li&gt;
    {% endfor %}
   &lt;/ul&gt;
 &lt;/div&gt;

{% endif %}
</code></pre>
<p>If I visit <code>ajax.twig?color=red</code> 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.</p>
<p>Does anyone know what I'm doing wrong? I've been stuck for days. Thanks in advance.</p>

CC BY-SA 4.0
2020-06-22T22:13:21.760Z
What happens if you call ‘/ajax’ instead of ‘ajax.twig’
dmatthams
CC BY-SA 4.0
2020-06-23T00:20:39.760Z
The error alert pops up, unfortunately.
Jake1293
CC BY-SA 4.0
2020-06-23T10:32:18.593Z
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
CC BY-SA 4.0
2020-06-23T13:09:13.707Z
It was not. It was in /templates/gallery/, but after moving it to /templates/ the result is the same.
Jake1293
CC BY-SA 4.0
2020-06-23T14:31:57.860Z
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
CC BY-SA 4.0
2020-06-23T18:03:15.440Z
If I change $.ajax("/templates/ajax.twig?search=" + value to $.ajax("/templates/ajax?search=" + value the Ajax request returns a 404 error.  I'm not sure there'd be any other logs to check since it's not a twig or php error.
Jake1293
CC BY-SA 4.0
2020-06-23T19:38:00.320Z
You don't need the 'templates' prefix, it's just like any other route on your site - the URL should be `/ajax`.
James Smith
CC BY-SA 4.0
2020-06-23T20:31:28.643Z
Yes! It works now, thank you so much :)
Jake1293
CC BY-SA 4.0
2020-06-24T04:13:27.117Z
One of you want to add what it ended up being as an official answer? :)
Brad Bell
CC BY-SA 4.0
2020-06-24T04:16:59.170Z
Added. The path to the ajax file was wrong.
Jake1293
<ajax><filter><checkboxes>
Ajax request returns code instead of result of the query (solved)
# Ajax request returns code instead of result of the query (solved)

(Asked by: username_0 on 2020-06-22)

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


  
    {% for gallery in galleries.all() %}
      
        
        {{ gallery.title }}
      
    {% endfor %}
   
 

{% 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.

**Tags:** ajax, filter, checkboxes

> **Comments:**
> **username_1**: What happens if you call ‘/ajax’ instead of ‘ajax.twig’  
> **username_0**: The error alert pops up, unfortunately.  
> **username_2**: It sounds like the template is not parsing as Twig - are you sure that ajax.twig is inside the root of your templates directory?  
> **username_0**: It was not. It was in /templates/gallery/, but after moving it to /templates/ the result is the same.  
> **username_1**: 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.  
> **username_0**: If I change $.ajax("/templates/ajax.twig?search=" + value to $.ajax("/templates/ajax?search=" + value the Ajax request returns a 404 error.  I'm not sure there'd be any other logs to check since it's not a twig or php error.  
> **username_2**: You don't need the 'templates' prefix, it's just like any other route on your site - the URL should be `/ajax`.  
> **username_0**: Yes! It works now, thank you so much :)  
> **username_3**: One of you want to add what it ended up being as an official answer? :)  
> **username_0**: Added. The path to the ajax file was wrong.  

---

## 1 answers

### Answer by username_0 on 2020-06-24. Score: 1 | Accepted answer

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


---

