If you experience bug where the Query Loop inside Nestable Slider doenst work when you use ajax filter element, you might try to use this javascript code.
Fix Bricks Filter Experimental Feature Issue on Nestable Slider
1 People find this code works
1 People find this code doesnt work
Is the code works?
7 comments
heyviet2
You my friend are a lifesaver. This worked great for me. I had to alter the code to add another observer for 2 different filtering carousels on page. Below is my code that worked (I manually set the ID names to make it easier). Hope it helps anyone that needs.
document.addEventListener(‘DOMContentLoaded’, function () {
// Function to refresh a specific Splide instance by ID
function refreshSplideById(id) {
console.log(`Refreshing Splide instance: ${id}`);
const splideInstance = window.bricksData.splideInstances[id];
if (splideInstance) {
splideInstance.refresh();
} else {
console.log(`Splide instance with ID ‘${id}’ not found.`);
}
}
// Function to observe changes on a specific filter and refresh associated Splide ID
function observeFilterChanges(filterSelector, splideId) {
const filterElement = document.querySelector(filterSelector);
if (!filterElement) {
console.log(`Element ${filterSelector} not found.`);
return;
}
const observer = new MutationObserver(function (mutationsList) {
for (let mutation of mutationsList) {
if (mutation.type === ‘childList’) {
refreshSplideById(splideId);
break;
}
}
});
observer.observe(filterElement, { childList: true });
return observer;
}
// Set up observers for both filters
const observer1 = observeFilterChanges(‘#activity-filter’, ‘hafagk’);
const observer2 = observeFilterChanges(‘#exhibit-filter’, ‘ceilva’);
});
Ivan Nugraha
Hey thanks for sharing your code.
jungwahdika
Hi mate, i’ve tried the code but it’s seems semi-working in my case
if using your code added with Code Widget (adjusted with my elements ID), it is not working, additionally the console also print nothing
but when i tried to add the refresh() in ‘Interactions’ > Ajax Query (start) also initialized observeChildChanges() in Bricks Settings > Custom Code
the console print:
Refreshing Splide instances…
the slider contents are loaded, but it looks broken
could you please help?
thank you!
Ivan Nugraha
Hi, do you have any dev site/staging where i can see the error?
jungwahdika
Hi Ivan, apologize for delayed response
I’ve follow your another guide to achieve sync slider
thank you! 🙂
lucasss
It’s not working
Ivan Nugraha
Hi, have you check the console log on your browser? Maybe you will have a clue from there.