Plugin Author
YMC
(@wssoffice21)
Hi!
The filter’s post grid works asynchronously, not synchronously, so your javascripts don’t see the loaded posts. If you need to interact with the loaded posts, you should use hooks:
ymcHooks.doAction('ymc/grid/after_update', data, container);ymcHooks.doAction('ymc/grid/after_update_filter_id', data, container);ymcHooks.doAction('ymc/grid/after_update_filter_id_instance_index', data, container);
For example:
ymcHooks.addAction('ymc/grid/after_update', function(data, container) {
console.log('Posts are inserted into the DOM:', container);
console.log('Server response data:', data);
});
OR
ymcHooks.addAction('ymc/grid/after_complete', function(status, container) {
if (status === 200) {
console.log('The request was completed successfully.');
}
});
We recommend adding a filter ID (filter_id) to the hook; this will allow you to avoid global application to all pages of the site. This will allow you to access the post card. Please check out the full list of hooks in the plugin documentation: https://github.com/YMC-22/YMC-Filter#javascript-integration-hooks
We hope this helps. We were happy to help!
Ok, thanks.
I’ve found a solution with this code :
function waitForElement(selector, callback) {
const observer = new MutationObserver((mutations, observer) => {
const element = document.querySelectorAll(selector);
if (element) {
observer.disconnect();
callback(element);
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
}
then I use :
waitForElement('article.post-card', (element) => {
console.log('Element exists:', element);
});
But I will try your solution.
Where do you put ymc hooks ?
Plugin Author
YMC
(@wssoffice21)
For reliability, you should use plugin hooks. You can add this code to your JavaScript files, for example in the section:
document.addEventListener("DOMContentLoaded", () => {
ymcHooks.addAction('ymc/grid/after_update', function(data, container) {
console.log('Posts are inserted into the DOM:', container);
console.log('Server response data:', data);
// Your code...
});
});
Don’t forget to specify the filter ID in the function, for example:
ymcHooks.addAction('ymc/grid/after_update_72', function(data, container) { ..})
Here, 72 is the ID of your filter on the page!
-
This reply was modified 14 hours ago by
YMC.
-
This reply was modified 13 hours, 57 minutes ago by YMC.
-
This reply was modified 13 hours, 56 minutes ago by YMC.
Ok, I put it in a javascript file, in jquery’s $(document).ready() function, but there’s an error :
The hook name can only contain numbers, letters, dashes, periods and underscores.
It works in document.addEventListener(“DOMContentLoaded”)
Does it work within JQuery ?
Plugin Author
YMC
(@wssoffice21)
Send us your JavaScript code. You probably added a bug somewhere )
Plugin Author
YMC
(@wssoffice21)
Yes, it should work inside $(document).ready(), but we recommend you use native JavaScript, it’s more reliable!
Just to say : your support is the best plugin support I have ever seen 🙂 !! BRAVO !!
