Filtre, liste déroulante

Ce sujet est résolu
115026
,

Bonjour,

Voila je rencontre un petit problème avec mon code. J'utilise Wordpress. Php pour afficher le contenu et Javascript pour les filtres.

J'essaye de faire un filtre qui filtre les posts par types de formations. Le but étant de ne pas changer de page bien sur, c'est pour ça que j'utilise du JS.

Voiçi mon filtre php :

<div id="filtre">
     <?php
           $formations = get_terms( 'formation', array(
                  'hide_empty' => true
             ) );

            echo '<select id="">';
            echo '<option selected="selected"';
            echo ' value="" id="tous">Type de formation</option>';

            foreach ($formations as $formation) {
                 ?>
                     <option value="<?php echo $formation->term_id ?>" class="filtrer" ><?php echo $formation->name ?></option>
                   <?php
            }
           echo '</select>';
    ?>
 </div>

Et le js :

$('#content-cas-client').ready(function(jQuery){
        $(function(){

            //lorsque je selectionne 'types de formations'
            $("#tous").click(function(){
                //j'affiche tous les posts
                $(".taxonomy").show();
            });
            //lorsque je selectionne un filtre "forma1" par exemple
            $(".filtrer").click(function(){
                //je recupere le contenu de la value qui l'id de la taxonomy
                var filtre = $(this).attr("value");
                //je cache tous les post
                $(".taxonomie").hide();
                //j'affiche tous les post qui ont la classe correspondant à la value (id de la taxo)
                $("."+ filtre).show();
            });
        });
    });

Du côté des posts je leur donne à tous la class" taxonomie" et bien sur l'id du la taxonomy Formation qui leur est attaché "19".

Mais voila il ne se passe rien. J'ai regardé des exemples sur internet mais je trouve pas l'erreur, il n'y a pas de rechargement de la page c'est peut être le problème ?

Merci beaucoup !

6 Réponse

115026
,

Voici la solution : il faut donc utiliser la fonction change de jQuery. Soit si rien n'est sélectionné, soit si une option du select est selectionné on affiche seulement ceux qui ont la valeur correspondante.

$('#lesFormations').change(function() {
        //si la value est vide
        if($('#lesFormations option:selected').val() == ''){
            //j'affiche tous les posts
            $(".taxonomie").show();

        //sinon j'affiche les posts correspond à la value selectionné
        }else{
            //lorsque je selectionne un filtre "forma1" par exemple
            filtre = $('#lesFormations option:selected').val();

            //je cache tous les post
            $(".taxonomie").hide();
            //j'affiche tous les post qui ont la classe correspondant à la value (id de la taxo)
            $("."+ filtre).show();
        }
    });
<?php
           $formations = get_terms( 'formation', array(
               'hide_empty' => true
            ) );

           echo '<select id="lesFormations">';
          echo '<option selected="selected"';
          echo ' value="" id="tous">Type de formation</option>';
          foreach ($formations as $formation) {
          ?>
               <option value="<?php echo $formation->term_id ?>" class="filtrer" ><?php echo $formation->name ?></option>
         <?php
        }
         echo '</select>';
 ?>
17162
, Il a répondu à ma question !

Bonjour.
Tu le charge à quel moment jQuery, dans la balise head ou avant la fermeture de la balise body ?

115026
, Il a répondu à ma question !

Bonjour,

Wordpress le charge nativement. Il le charge dans le head.

Merci !

17162
, Il a répondu à ma question !

Et ton code javascript aussi est chargé dans le head ?

115026
, Il a répondu à ma question !

Mon script est aussi chargé dans le head.

Réponse d'un autre forum : "Le click sur le select ne marche pas. Il faut regarder l'evenement change. Du coup tu met un id sur ton select et tu ecoute le change, quand ca change tu récupère le select choisit val() et tu fais ton traitement."

12066
, Il a répondu à ma question !

Wordpress ne charge pas par défaut jQuery. Moi perso je le charge dans un widget de bas de page.