Best way to add custom functions/events to trigger on filter change

Anonymous

#56848

Hello,

I am trying to show some custom content on the search and filter results page when a certain filter is selected. Since the results are loaded with AJAX and the page doesn’t refresh, I am trying to do this with Javascript. With JQuery, I am toggling the display of a div when the filter checkbox changes.

$(document).ready(function() {
				var $e_book_info = $('#e-book-info');
				var $input = $('input[value="e-book"]');
				if ( $input.is(":checked") ) {
					console.log('checked');
					$e_book_info.show();
				}
				$('input[value="e-book"]').on('change', function() {
						$e_book_info.toggle();
						console.log('toggle switch');						
					
				});
			});	

The toggle works when the input is clicked once, but if I try to click it again to toggle back, the function fails to execute, but the AJAX is working fine with Search and Filter. My question is, how can I implement this functionality without the filtering and my function getting in the way of each other? I’m assuming something in the Search and Filter JS is blocking my function from running again.

Thanks for your help!
Travis

Trevor

#56861

When the input is clicked, does that trigger our Ajax? If it does, you need to re-write your code as a named function and then call that function form the document.ready, and also use this javascript:

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so load your lightbox or JS scripts here again
});

Does that make sense?

Anonymous

#56874

Hi Trevor,

That worked perfectly! Thank you for the quick response!

All the best,
Travis

[Author]

Posts