JavaScript ne fonctionne pas dans un widget Elementor

[normancrowley]

Bonjour

J'ai créé un javascript pour afficher une liste de fichiers PDF filtrés par un SELECT (année).

Cela fonctionne très bien sur une page HTML, mais lorsque j'intègre ce script dans un widget HTML Elementor cela ne fonctionne plus.

Il n'y a pas de message d'erreur dans la console, mais la modification du SELECT ne change pas la classe des éléments <div class="pdf-item">.

Voici le HTML et le script :

Code : Tout sélectionner

<style>
    .pdf-item { display: none; }
    .pdf-item.visible { display: block; }
</style>
<select id="yearFilter">
    <option value="">Tous les ans</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
</select>

<div id="pdfList">
    <div class="pdf-item" data-year="2022">Document 1</div>
    <div class="pdf-item" data-year="2023">Document 2</div>
    <div class="pdf-item" data-year="2022">Document 3</div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const yearFilter = document.getElementById('yearFilter');
        const pdfList = document.getElementById('pdfList');

        console.log('DOM fully loaded and parsed');

        if (yearFilter) {
            console.log('yearfilter existe');
            yearFilter.addEventListener('change', function () {
               debugger; // Ajoutez cette ligne avant l'événement change pour activer le débogage
                console.log('Change event triggered');
                const selectedYear = this.value;
                console.log('Selected Year:', selectedYear);

                pdfList.querySelectorAll('.pdf-item').forEach(item => {
                    const itemYear = item.dataset.year;
                    console.log('Item Year:', itemYear);

                    if (!selectedYear || itemYear === selectedYear) {
                        console.log('Adding visible class to:', item);
                        item.classList.add('visible');
                    } else {
                        console.log('Removing visible class from:', item);
                        item.classList.remove('visible');
                    }
                    console.log('Current classes for item:', item.className);
                });
            });
        } else {
            console.log('Year filter element not found');
        }
    });
</script>

[ornatebroke]

While the code worked fine on a regular HTML page, when embedded in Elementor, changing the selection in the dropdown did not change the class of the <div class="pdf-item"> elements. No error messages appeared in the console, but events were not firing as expected. The HTML and JavaScript code were provided, including a dropdown for year selection and a list of PDFs with a data-year attribute. To fix this, it may be necessary to ensure that the JavaScript code runs after the Elementor content has loaded, check for conflicts with other scripts, or use jQuery to improve compatibility.

[emmausa0106]

Elementor charge dynamiquement ses éléments, et le DOMContentLoaded peut se déclencher avant que le widget ne soit réellement injecté dans le DOM. Dans ce cas, votre getElementById('yearFilter') ne trouve rien, car l'élément <select> n’existe pas encore au moment de l'exécution du script. Slitherio

[splitsales]

Essayez de déplacer le script en bas du widget, après tous les éléments HTML.
Parfois, dans Elementor, le DOM n’est pas prêt au moment où le script s’exécute, même avec DOMContentLoaded.