Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-06-24T04:15:49.080Z
Answers.LastActivityDate: 2020-06-24T04:15:49.080Z
Answers.UserDisplayName: Jake1293
Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-22T22:13:21.760Z
Comments.Text: What happens if you call ‘/ajax’ instead of ‘ajax.twig’
Comments.UserDisplayName: dmatthams
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-23T00:20:39.760Z
Comments.Text: The error alert pops up, unfortunately.
Comments.UserDisplayName: Jake1293
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-23T10:32:18.593Z
Comments.Text: It sounds like the template is not parsing as Twig - are you sure that ajax.twig is inside the root of your templates directory?
Comments.UserDisplayName: James Smith
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-23T13:09:13.707Z
Comments.Text: It was not. It was in /templates/gallery/, but after moving it to /templates/ the result is the same.
Comments.UserDisplayName: Jake1293
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-23T14:31:57.860Z
Comments.Text: 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.
Comments.UserDisplayName: dmatthams
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-23T18:03:15.440Z
Comments.Text: 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.
Comments.UserDisplayName: Jake1293
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-23T19:38:00.320Z
Comments.Text: You don't need the 'templates' prefix, it's just like any other route on your site - the URL should be `/ajax`.
Comments.UserDisplayName: James Smith
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-23T20:31:28.643Z
Comments.Text: Yes! It works now, thank you so much :)
Comments.UserDisplayName: Jake1293
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-24T04:13:27.117Z
Comments.Text: One of you want to add what it ended up being as an official answer? :)
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-06-24T04:16:59.170Z
Comments.Text: Added. The path to the ajax file was wrong.
Comments.UserDisplayName: Jake1293
Tags: <ajax><filter><checkboxes>
Title: Ajax request returns code instead of result of the query (solved)
ThreadText: # 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](https://craftcms.stackexchange.com/questions/35626/how-to-filter-by-multiple-checkbox-field-types-with-ajax-edited) 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.
  
  **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, {
  
  ```
  
  
  ---
  
  