AJAX filtering on change select

Kirby 3
1

Hi to all,

I have Ajax listings on page
and want to create multifilter section that will be update listings on select value.

/* AJAX Load More */
$(function(){
 var element = $('.reviews, .bonuses, .games');
 var url     = element.data('page') + '.json';
 var limit   = parseInt(element.data('limit'));
 var offset  = limit;
 
 var search  = element.data('search');
 var categories  = element.data('categories');

 $('#load-more').on('click', function(e) {

   $.get(url, {limit: limit, offset: offset, search: search, categories: categories}, function(data) {
     if(data.more === false) {
       $('#load-more').hide();
     }

     element.children().last().after(data.html);

     offset += limit;

   });
 });
});


 $("select").on("changed.bs.select", function(e) {
  
   var form_data = $(this).serialize();
   var element = $('.reviews, .bonuses, .games');
   var url     = element.data('page');

   $.ajax({
           type: "POST",
           url: url,
           data: $("select").serialize(), // serializes the form's elements.
           success: function(data)
           {

           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
	});

With first function everything is ok, and listing loads well.
If I made script that is send request on click … filter is also works fine:

 $("#review-form").submit(function(e) {
  
   var form_data = $(this).serialize();
   var element = $('.reviews, .bonuses, .games');
   var url     = element.data('page');

   $.ajax({
           type: "POST",
           url: url,
           data: $("#review-form").serialize(), // serializes the form's elements.
           success: function(data)
           {

           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
	});

But how to made function that will be works on select items…

2

You would have react on a change event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event