Trier des articles avec des boutons

<< 1 2

19 octobre 2021 à 17:14:55

o_O

Pourtant tu arrivais bien à obtenir les console.log auparavant ?

Tu ne t'es pas mélangé les crayons quelque part ?
Je vois que dans ton précédent code, tu utilisais le nom de variable "params" et tu arrivais à logger les paramètres GET. Moi j'ai utilisé queryString comme nom de variable.

Et de mon côté tout fonctionne.

Enfin, même technique que d'habitude pour traquer le bug : tu met des console.log à chaque étape du traitement et tu vois où ça foire...

MattK.

20 octobre 2021 à 7:53:22

QU'entends-tu par obtenir les console.log ?

J'ai pourtant recopié ton code 1:1 pour tester... Dans l'URL c'est bien ?datatag=lenomdutag que je dois ajouter ?

LucasWerquin

20 octobre 2021 à 8:20:45

Par "obtenir les console.log()", je veux dire qu'en ajoutant l'instruction "console.log(queryString.get('datatag'))", la console de développement te donne bien "null" ou le nom du datatag demandé.

Et oui, c'est bien ça, dans ta barre d'adresse, tu met "monsite.com" ou "monsite.com?datatag=toto".

Alors bon, moi j'ai testé sous chrome, alors à moins que toi tu teste dans un navigateur ne prenant pas en charge URLSearchParams(), ça devrait marcher aussi.

Je viens de re-re-re-tester de mon côté, le seul petit truc qui n'est pas tip-top, c'est que l'image de la coche verte ajoutée aux TABbtn actifs ne déclenche pas l'évènement. Il faudrait que je jette un oeil à la doc sur addEventListener() pour voir si il n'y a pas une option pour que l'eventListener soit appliqué aux éléments enfants...

MattK.

20 octobre 2021 à 9:05:29

Ah oui, la console me donne toujours le nom du tag lorsque j'en ajoute un ! Par contre il n'y a aucun effet sur ma page. La coche n'apparait pas et mes articles ne se trient pas.

Et lorsqu'un datatag est actif, j'ai ce message d'erreur dans la console :

Uncaught TypeError: button is null

J'utilise firefox mais j'ai le meme effet dans chrome.

LucasWerquin

20 octobre 2021 à 10:04:20

Vraiment, je ne pige pas.

Le paramètre button de la fonction afficherArticles() est d'ailleurs inutile. Je l'ai supprimé, et tout fonctionne toujours de mon côté.

Je te redonne tous les fichiers ( hormis l'image ) que j'utilise :

HTML:

    <body>
        <header><!-- Placez ici le contenu de l'en-tête de votre page -->
			<h1>Mon titre</h1>
		</header>
		
        <section>
            <div id="MesArticles" class="Contenu">
                <a href="#1" class="Art-visible" data-tag="toto"> Art1</a>
                <a href="#1" class="Art-visible" data-tag="tata">Art2</a>
                <a href="#1" class="Art-visible" data-tag="titi"> Art3</a>
                <a href="#1" class="Art-visible" data-tag="toto">Art4</a>
                <a href="#1" class="Art-visible" data-tag="toto tata"> Art5</a>
                <a href="#1" class="Art-visible" data-tag="titi">Art6</a>
                <a href="#1" class="Art-visible" data-tag="toto tata titi"> Art7</a>
                <a href="#1" class="Art-visible" data-tag="tata">Art8</a>
                <a href="#1" class="Art-visible" data-tag="tutu titi">Art9</a>
                <a href="#1" class="Art-visible" data-tag="tonton tata">Art10</a>
            </div>

            <div id="TABbuttons" class="BoutonTAB">
            
            </div>
        </section>
    </body>

css :

.Art-hidden{
    display: none;
}

.Art-visible{
    display: inline;
}

Et enfin js :

document.addEventListener('DOMContentLoaded', () => { //lance la fonction createTABbuttons une fois le DOM chargé
    createTABbuttons();
    let queryString = new URLSearchParams(document.location.search.substring(1));
    if(queryString.get('datatag')){
        toggleButton(document.getElementById('TABbtn_' + queryString.get('datatag')));
    }
    afficherArticles();
});

const toggleButton = function(button) {
    if(button.innerHTML.indexOf('>') >-1){ //si l'élément contient "v " ( ou la balise image )
        button.innerHTML = button.innerHTML.substring(button.innerHTML.indexOf('>')+1); //enlever "v ", ou la balise image, dans ce cas 2 devra être remplacé par le nombre de caractères de la balise image, ou event.target.innerHTML.substring(event.target.innerHTML.indexOf('>')), soit le chevron de fermeture de la balise
    }
    else{
        button.innerHTML = '<img src="coche_verte.png" alt="coché">' + button.innerHTML; //sinon ajouter "v " ou la balise image
    }
    button.toggleAttribute('isActive');//ajouter ou retirer l'attribut "isActive
            
}

const afficherArticles = function() {
    let activeTags = [];//déclarer ou réinitialiser le array de tags actifs
    for(i=0; i<document.getElementById('TABbuttons').children.length;i++){ //pour chaque bouton présent dans "TABbuttons"
        if(document.getElementById('TABbuttons').children[i].hasAttribute('isActive')){//si l'élément a l'attribut "isActive"
            activeTags.push(document.getElementById('TABbuttons').children[i].getAttribute('id').substring(7));//récupérer le nom du tag en découpant l'id du bouton ( enlever "TABbtn_", soit 7 caractères)
        }
    }
    if(activeTags.length<1)//si aucun tag n'est activé
        for(i=0;i<document.getElementById('MesArticles').children.length;i++){
            document.getElementById('MesArticles').children[i].setAttribute('class', 'Art-visible');//afficher tous les articles
        }
    else{
        for(i=0;i<document.getElementById('MesArticles').children.length;i++){
            document.getElementById('MesArticles').children[i].setAttribute('class', 'Art-hidden');//sinon les cacher tous dans un premier temps
        }
        for(i=0;i<activeTags.length;i++){ //pour chaque tag présent dans le array des tags actifs
            for(let y=0;y<document.getElementById('MesArticles').children.length;y++){ //et pour chaque article
                if(document.getElementById('MesArticles').children[y].getAttribute('data-tag').indexOf(activeTags[i]) > -1) //si le tag est présent dans le data-tags
                    document.getElementById('MesArticles').children[y].setAttribute('class', 'Art-visible'); //afficher l'article
            }
        }
    } 
}

const createTABbuttons = function() { //créé les boutons TAB
    let tagList = []; //déclare un array vide, qui sera rempli par les tags récupérés
    let items = document.getElementById('MesArticles').children; //récupère un array contenant les liens contenus dans 'MesArticles'
    for(let i=0; i<items.length; i++){ //pour chaque lien
        let dataTags = items[i].getAttribute('data-tag').split(' '); //récupère le data-tag, puis le transforme en array de tags
        for(let y=0;y<dataTags.length;y++){ //Pour chaque tag de ce lien
            if(!tagList.includes(dataTags[y])) //si le array tagList ne contient pas le tag
                tagList.push(dataTags[y]); //l'ajouter
        }
    }
    for(i=0;i<tagList.length;i++){ //pour chaque tag contenu dans le array tagList
        let newButton = document.createElement('button'); //créer un élément button
        newButton.setAttribute('class', "btn"); //lui attribuer la class 'btn'
        newButton.setAttribute('id', 'TABbtn_' + tagList[i]); //lui attribuer un id
        newButton.innerHTML = tagList[i]; //remplir le bouton avec la valeur du tag
        newButton.addEventListener('click', () => { //lui ajouter un eventListener
            toggleButton(event.target);
            afficherArticles();
        });
        document.getElementById('TABbuttons').appendChild(newButton); //ajouter le bouton créé dans 'TABbuttons
    }
}

MattK.

20 octobre 2021 à 14:06:25

ok, ton code fonctionne effectivement chez moi aussi. Par contre dans ma page, j'ai un problème. J'ai essayé de desactiver tout mon css, ça n'aide pas, le problème doit donc être dans mon html. Est-ce que c'est parce que j'utilise des <div> ?

<div class="list_class">Filtrer par type de publications :</div>
        <div id="TABbuttons" class="BoutonTAB"></div>
        <div id="MesArticles" class="Contenu"> 
            <div class="Art-visible" data-tag="Cours NBA">
                <div class="list_class">Cours NBA | 10 septembre 2021</div>
                <div class="list_event"><a class="no-text-decoration" href="../blablabla.php>blablabla</a></div>
                <div class="list_autor">par <a href="../jean.htm">Jean</a></div>
                <a href="../blablabla.php"><img class="list_img" src="../images/relax-stress.jpg"></a>
            </div>

            <div class="Art-visible" data-tag="Test">
                <div class="list_class">Test | 6 septembre 2021</div>
                <div class="list_event"><a class="no-text-decoration" href="../test.php">test</a></div>
                <div class="list_autor">par <a href="../pierre.php">Pierre</a></div>
            </div>
</div>

LucasWerquin

20 octobre 2021 à 14:53:35

Non, mais il y a peut-être un souci avec le fait que tu mettes un espace dans un des datatag ( cours NBA ).
Tel que j'ai fait mon javascript, cette div aura deux data-tag, "cours" et "NBA".

Ces deux divs devraient conduire à la création de trois TABbtn, "Cours", "NBA" et "Test".

Ton css est requis pour que le code fonctionne, puisque l'apparition / la disparition d'une div passe par la modification des classes, chacune ayant une propriété css différentes.

Par contre, dans ce HTML, il y a un souci à la ligne 6, ton attribut href n'a pas de guillemets de fermeture, et il manque également le chevron de clôture de la balise ouvrante :

<div class="list_event"><a class="no-text-decoration" href="../blablabla.php>blablabla"></a></div>

J'ai fait ces corrections, et de mon côté ça fonctionne comme je l'avais prévu, trois TABbtn sont créés, la première div étant liée aux deux premiers TABbtn ( "Cours" et "NBA" ).

MattK.

20 octobre 2021 à 15:56:48

Cette fois ça fonctionne, merci pour ton aide ! J'avais un problème de majuscule/minuscule dans les tags :euh:

Par contre, n'y-a-t'il pas un moyen de faire qu'il lise le tag en entier (espace inclus)?

Parce que mes tags seront par exemple : "cours", "cours 1", "cours 2", "exa", "exa 1", "exa 2" et ça me donne un peu le bordel quand je veux trier... Si je presse le bouton "exa" et "1", le tag "cours 1" s'affiche aussi.

LucasWerquin

20 octobre 2021 à 16:07:39

Alors, tel que j'ai conçu le code que je t'ai donné, c'est un peu compliqué ( mais pas infaisable ).

A l'origine, tes liens pouvaient comprendre plusieurs tags. Donc par exemple si un lien contenait le datatag "tata toto", le lien apparaissait à la fois quand on cliquait sur le bouton "tata" ET sur le bouton "toto".

Maintenant, si chaque cours a son propre datatag unique, la contrainte n'est pas du tout la même!
Dans mon code, l'espace servait de repère pour "découper" la chaîne de caractères du datatag en plusieurs tags ( let dataTags = items[i].getAttribute('data-tag').split(' '); ).

J'imagine que le plus simple serait d'utiliser un autre séparateur ( par exemple l'underscore ) :

let dataTags = items[i].getAttribute('data-tag').split('_'); //Tiens, on dirait un smiley

MattK.

20 octobre 2021 à 16:50:32

Ok, merci, je vais tester ça !

<< 1 2