[Resolved] AJAX search filter update closes an accordion

[Author]

Posts

[johnB-43]

I am trying to:
Create an AJAX search with filters. The filters are meant to be hidden by default and open with an accordion.

Link to a page where the issue can be seen:
hidden link

I expected to see:
When I update a filter, I'd like the refreshed page to keep the advanced search accordion open

Instead, I got:
The accordion closes with every filter update, which is very frustrating as typically people will want to apply more than one filter.

[Shane]

Hi John,

The best way to work around this is to set your view to only filter once the search button is pressed.

This would mean that you would need to change the setting in your views custom search settings section and then add the search button itself.

Please let me know if this helps.

Thanks,
Shane

[johnB-43]

Thanks! I'd rather avoid that if possible, as it adds more clicking. Is there perhaps some other alternative, something else than using an accordion perhaps?

[Shane]

Hi John,

You will need to make use of callback functions to open the accordions. The reason why this is happening is because you have the live filters enabled, so your view is filtering as you select an option.

This means that this entire section is getting refreshed with a new div and the javascript that is responsible for the accordion this the accordion is the same.

So you will need to callback the function in order for you to have it open again. Could you let me know where you got this accordion code from ?

Thanks,
Shane

[johnB-43]

Thanks for the explanation. This may be a naive question, but would it not be possible for the AJAX refresh to only refresh the view and not the filter? They are in separate containers, couldn't the <form> just not get refreshed when the option is changed?

In any case, the accordion is an adapted bootstrap one: hidden link.

I imagine I can call on the JS in the view's Custom Search Settings - but won't that lead to the accordion closing and opening again in the process?

[Shane]

Hi John,

Add this to your JS section of the filters section of your view.

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
 jQuery('.collapse').collapse()

	
});

If this doesn't work then there is a frontend events button on the JS editor that you can add other frontend events callback. All you have to do is add jQuery('.collapse').collapse() to the appropriate one.

Thanks,
Shane

[johnB-43]

Thanks for the code. The problem is that now the page reloads with the accordion closed and then quickly opens it. I mean, it does the job, but just looks quite bad. If there is no better way to approach this, I might need to resign of the accordion after all, or think of some other way to filter the results.

[Shane]

Hi John,

Yes this is actually a limitation and what is going to happen.

Its because the function needs to be called back after the page has finished loading and the search was completed.

Thanks,
Shane

[johnB-43]

Thanks! I guess I'll just find another way.
Perhaps this could be a feature request: an AJAX search that only refreshes the results, not the search filter.