Javascript на изменения не работает (Ajax для загрузки отфильтрованных элементов)

Question

Я в shopify и пытаюсь Ajax фильтр.У меня есть выпадающий список, и в раскрывающемся списке он должен использовать Ajax для замены содержимого группы продуктов в div #collection.

Мой onchange не может найти функцию моих обновлений.Что не так с моим синтаксисом?

<script>
$(function() {
    var popped = ('state' in window.history && window.history.state !== null),
      initialURL = location.href;

    //function to handle the scenarios where back and forward buttons used in browser
    $(window).bind("popstate", function(e) {
      // Ignore inital popstate that some browsers fire on page load
      var initialPop = !popped && location.href == initialURL;
      popped = true;
      if (initialPop) {
        return;
      }
      ajaxLoadPage(location.href);
    });


    //the ajax function that does the AJAX calls to get the products and load them into the grid
    var ajaxLoadPage = function(url) {
      $.ajax({
        type: 'GET',
        url: url,
        data: {},
        complete: function(data) {
          $('#collection').html($("#collection", data.responseText).html());
          history.pushState({
            page: url
          }, url, url);
        }
      });
    }
  }

  function update_flavors(ajax_page) {
    $.ajax({
      type: "GET",
      url: ajax_page + "?view=flavors-field",
      success: function(html) {
        $("#collection").html(html);
      }
    });
  }

  function update_products(ajax_page) {
    $.ajax({
      type: "GET",
      url: ajax_page + "?view=products",
      data: {},
      success: function(html) {
        $("#collection").html(html);
        history.pushState({
          page: ajax_page
        }, "", ajax_page);

      }
    });
  }

</script>