[Resolved] Filters break Kadence accordion

[Author]

Posts

[katjaL]

I have a view block in which the loop item data is inside a Kadence accordion. Also there are Ajax filters.
Now when entered in the page the accordions work fine. After filtering they don't open anymore.

If I don't use Ajax, accordions work fine after submit refresh page. So somehow Ajax breaks the accordion. Any idea how to fix this?

[Mateus Getulio]

Hello there,

Thank you for sharing that information.

Can you please give me an example of a page where I can experience this issue?

Also, I'd like to ask permission to make a copy/staging version of your site where I can debug this closely without affecting the live site.

I'll make sure to delete this copy as soon as we get this issue fixed.

I'm afraid of debugging directly on the live site and cause issues to your visitors. Also, it is important to test a different setup as part of the troubleshooting.

Thank you, please let us know.
Mateus

[katjaL]

Hi Mateus. Would you please make the next reply private so I can share you the things you asked. Thank you.

[Mateus Getulio]

Sure thing.

I went ahead and marked your next reply as private.

Thank you.

[katjaL]

Since this is urgent to publish now, I will send you a duplicator package of the site. We shall publish it with the proper domain and use non-ajax search and filtering there.

[Mateus Getulio]

Hey there,

Thank you for providing us with the duplicator package.

I'm enabling the proper field for your to share this copy, you'll see it on your next response.

Alternatively, you may use any file sharing service that you prefer and share the link in the ticket(your next response is being marked as private, only you and I have access to it).

Thank you, please let me know.

[katjaL]

The search is in this packkage non-ajax, because the ajax version's kadence accordion doesn't work. But change the search to ajax so you see the problem after filtering.

[Mateus Getulio]

Hello there,

I checked it and it looks like the issue likely originates from the fact that after the AJAX filtering occurs, the JavaScript that controls the Kadence Accordion is not being reinitialized. When you use AJAX to filter the content, the page does not reload, which means that any JavaScript tied to the accordion, such as event listeners for the accordion's open/close functionality, does not get reapplied to the newly loaded content.

I looked into the Kadence plugins file and I was able to find the JS that gets it started in wp-content/plugins/kadence-blocks/includes/assets/js/kt-accordion.min.js

To fix the issue I added the following JavaScript directly to the View settings within that page:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	// Reinitialize Kadence Accordion after AJAX content load
    if (typeof window.KadenceBlocksAccordion !== 'undefined' && typeof window.KadenceBlocksAccordion.init === 'function') {
        window.KadenceBlocksAccordion.init();
    }
  
});

That will cause the accordion code to be reloaded everything the filter changes.

I tested it on my local site and it worked as expected, can you please test it and confirm it is fixed?

Thank you,
Mateus

[katjaL]

Wow Mateus, thank you so much, it works now!