Ajax request is returning code instead of rendered html

Question

I'm building a site in CraftCMS, but I think my issue is more specific to Ajax/Javascript than to Craft.

I have some checkboxes, and when clicked, I'm trying to use Ajax to pass the checkbox value as a query string to a separate page and append the rendered results to the current page.

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() {
      alert("Error");
    }
  });
});

The page I'm trying to call with Ajax looks like this. It accepts a query string and uses that to perform a query and display results.

{% 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, I see the rendered result. However, the Ajax request is returning the code shown above rather than rendered HTML result. I've tried using .load() and .get() and had the same result.

Does anyone know what I'm doing wrong? Thanks in advance.

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