Ajax conflict? Filters don't work after first Ajax reload

Anonymous

#165312

http://wordpress-126708-362887.cloudwaysapps.com/search/

I’ve wrapped some of the search filters inside of a “more filter” accordion toggle so that
they can be expanded and collapsed (show / hide filters). When the page is first loaded, these filters work fine. But the very first time the form updates via Ajax, the filters freeze.

This doesn’t happen if they’re not wrapped in the accordion, so it seems to be some kind of jQuery / ajax update conflict? Thanks in advance for taking a look.

Here’s the jQuery that’s creating the accordion:

	<script type="text/javascript"> 
	jQuery(document).ready(function($) {	
			$('.sf-field-taxonomy-access_level, .sf-field-taxonomy-topic, .sf-field-post_type, .sf-field-post_date').wrapAll('<div class="accordionCollapse clearfix" />');
			$('.accordionCollapse').hide();
			$('.accordionCollapse').before('<p class="moreFilters">More Filters</p>');
			$( '.moreFilters' ).click(function() {
				$(this).toggleClass( "minus" );
				$( '.accordionCollapse' ).slideToggle( "fast" );

			});
	});
	
	
</script>

Ross Moderator

#165355

Hi Kendra

I think its the “wrapAll” function.

You are wrapping .sf-field-taxonomy-access_level for example in a div, but this is an li, so this is breaking the DOM structure for the ul

I’m not sure exactly what to suggest, but rather than create new elements (like wrapping in a DIV) why not just add the clearfix and accordionCollapse classes to our LI’s?

There are a couple of prefered methods to attaching classes to S&F (if wanting to use ajax), which I can explain if you are happy to go down that road?

Thanks

Anonymous

#165429

Yeah, that would be ideal, please let me know the best way to go about attaching classes, etc.

Anonymous

#165431

Heya, just tried to make that change, and that definitely fixes the “freezing” problem (thank you!) but the CSS classes I add to the <li> are removed on ajax update. There something I can do about that?

<script type=”text/javascript”>
jQuery(document).ready(function($) {
$(‘.sf-field-search’).after(‘<p class=”moreFilters”>More Filters</p>’);
$(‘.sf-field-taxonomy-access_level, .sf-field-taxonomy-topic, .sf-field-post_type, .sf-field-post_date’).addClass(“accordionCollapse”);
$(‘.accordionCollapse’).hide();
$( ‘.moreFilters’ ).click(function() {
$(this).toggleClass( “minus” );
$( ‘.accordionCollapse’ ).slideToggle( “fast” );

});
});

</script>

Ross Moderator

#165509

Hi Kendra

The best way to do this for now is with JavaScript – then after S&F loads results via ajax (it also loads a new copy of the search form) you would re-attach your classes – check the first FAQ for the JS event for detecting ajaxfinish:
https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

Let me know if that makes sense.

Thanks

[Author]

Posts