[ar] [ca] [cpf] [de] [en] [es] [fr] [it]

Ce forum d’entraide est recommandé pour les utilisateurs et utilisatrices occasionnels de SPIP (Système de publication pour l’Internet). Avant de poser une question, faites une recherche sur ce site, consultez les liens utiles. Si vous ne trouvez pas de réponse, postez votre message dans la rubrique appropriée, avec un titre explicite.

Sujets : 24136 Sujets résolus :  39 %

79 visiteurs en ce moment


Accueil > Forums de discussion >  Création de squelettes > Assemblé titres et articles de plusieurs pages(squelettes) sur une nouvelle (...)

Assemblé titres et articles de plusieurs pages(squelettes) sur une nouvelle pages(squelettes).

par Jhessy - 8 août 15:10 - Réponse(s) : 3

Bonjour !
J’ai besoin de votre aide les amis le plut tôt possible serai top parce que je suis complètement a la bourre dans un projet. Je galère depuis très longtemps sur ce sujet, où j’avance a pas de tortue comme je suis un débutant dans la programmation en SPIP.

Le problème que j’ai c’est que j’essaie de créer une liste déroulante a choix multiple. Jusque là ma liste déroulante fonctionne très bien. Elle récupère des Tags qui sont des mots-clés donnés a des articles. Ces articles peuvent avoir plusieurs mots-clés. De base il y a déjà une page qui regroupe tout ces tags. Cette page contient le titre du Tags et en dessous une liste des articles qu’elle contient. Alors mon formulaire a liste déroulante a choix multiple se trouve sur la page d’accueille et affiche bien une liste déroulante a choix multiple de mes tags. En effet on a une liste déroulante où l’on peut faire plusieurs choix en cochant les checkbox qui nous renvois sur la page qui regroupe les mots-clés, que si l’on coche un seul mot-clé donc on ne peut pas rechercher 2 Tags car, comme je vous l’ai dis un peut plus haut, les Tags sont de regroupé sur une page SQUELETTE où ils ont, pour chacun d’eux (quand on clique dessus), leur propre titre et leurs propre liste d’article.
Ce que je cherche a faire c’est de créer une nouvelle page qui pourra, par exemple, quand je choisis/coche 2 (ou plus) articles dans mon formulaire, cela me chargerai cette nouvelle page qui peut mettre, en fonction du nombre de tags qu’on a coché, 2 (ou plus) titre (des tags coché) l’un a coté de l’autre séparer par une virgule et leur articles qui seront listé l’un en dessous de l’autre. comme par exemple sur ce site : http://www.lelabo-ess.org/+-agriculture-biologique-+.html , vous verrez le tag "Agriculture avec son titre au centre de la page et ses articles en dessous, moi ce que je veux faire sur ma nouvelle page, c’est de pouvoir par exemple faire une page presque similaire mais où l’on pourrait avoir en titre "Agriculture, Alimentation" et rassemblé les articles d’agriculture et d’alimentation ensemble en dessous du titre comme c’est déjà présenté.

Pour vous aider je vais vous mettre 2 codes, la première celle qui génère la page que je vous ai mis en lien et la deuxième, le code que j’ai qui permet de faire ma liste déroulante a choix multiple qui est sur la page d’accueille (tout se passe en locale bien-sur).

Le code qui génère la page que je vous ai mis en lien :

[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
<head>
<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
<title>[(#TITRE|couper{80}|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF|couper{150}|attribut_html)" />]
[<link rel="canonical" href="(#URL_MOT|url_absolue)" />]
<INCLURE{fond=inclure/head} />
[(#REM) Lien vers le flux RSS des articles du mot cle ]
<link rel="alternate" type="application/rss+xml"[ title="(#TITRE|attribut_html)"] href="[(#URL_PAGE{backend}|parametre_url{id_mot,#ID_MOT})]" />
</head>

<body class="pas_surlignable page_rubrique">
<div class="page">

        <INCLURE{fond=inclure/header} />
        <INCLURE{fond=inclure/nav,env} />

   <div class="main">
                [(#REM) Contenu principal : contenu du mot-cle ]
                <div class="wrapper">
                               <p class="arbo"><a href="#URL_SITE_SPIP/"><:accueil_site:></a> &gt;  <strong class="on">[(#TITRE)]</strong></p>

                <div class="content" id="content">
       
                        <div class="cartouche">
                                <h1 class="#EDIT{titre}">#TITRE</h1>
                        </div>
                        [<div class="#EDIT{chapo} chapo surlignable">(#DESCRIPTIF|image_reduire{520,*})</div>]
                        [<div class="#EDIT{texte} texte">(#TEXTE)</div>]
       
                        [(#REM) Articles lies au mot-cle ]
                        <B_articles>
                        <div class="menu menu_articles">
                                #ANCRE_PAGINATION
                                <ul>
                                        <BOUCLE_articles(ARTICLES) {id_mot} {par num titre} {!par date} {pagination 20}>
                                        <li><a href="#URL_ARTICLE">
                                                <strong>[(#LOGO_ARTICLE|right||image_passe_partout{120,100}|image_recadre{120,100,center})]#TITRE</strong>
                                                <br /><small>[(#CHAPO*|textebrut|couper{180})]</small></a>
                                        </li>
                                        </BOUCLE_articles>
                                </ul>
                                [<p class="pagination">(#PAGINATION{page})</p>]
                        </div>
                        </B_articles>
       
       
                        [<div class="notes"><hr />(#NOTES)</div>]
       
                </div><!--.content-->
             <div class="gauche">
                        [(#REM) Menu de navigation mots-cles : les autres mots cles du meme groupe ]
                        <B_mots_freres>
                        <div class="menu_rubriques">
                                #ANCRE_PAGINATION
                                <h2>Voir aussi</h2>
                                <ul>
                                        <BOUCLE_mots_freres(MOTS) {type} {par titre} {pagination 20}>
                                        <li><a href="#URL_MOT"[ class="(#EXPOSE)"]>#TITRE</a></li>
                                        </BOUCLE_mots_freres>
                                </ul>
                                [<p class="pagination">(#PAGINATION)</p>]
                        </div>
                        </B_mots_freres>
       </div>
                </div><!--.wrapper-->
       
                <div class="aside">
       <BOUCLE_focus(RUBRIQUES){id_rubrique = 19}>
                [(#FOCUS|image_reduire{260,0})]
                </BOUCLE_focus>
                        <INCLURE{fond=inclure/droite, id_rubrique} />
                        <INCLURE{fond=inclure/cherche} /><!--Recherche et réseaux sociaux-->
                       
                </div><!--.aside-->
        </div><!--.main-->

        <INCLURE{fond=inclure/footer,self=#SELF} />

</div><!--.page-->
</body>
</html>
</BOUCLE_principale>

Et maintenant, juste le code que j’ai qui permet de faire ma liste déroulante a choix multiple (qui est sur la page d’accueille) :

<style>
   .multiselect {
       width: 200px;
   }

   .selectBox {
       position: relative;
   }

   .selectBox select {
       width: 100%;
       font-weight: bold;
   }

   .overSelect {
       position: absolute;
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
   }

   #checkboxes {
       display: none;
       border: 1px #dadada solid;
       background-color: gray;
   }

   #checkboxes label {
       display: block;
   }

   #checkboxes label:hover {
       background-color: yellow;
   }
</style>

<!--
   fait reference à la valeur du selectedIndex de selectBox, toi tu veux bosser sur les valeurs de #checkboxes
   tu devras boucler sur les differents inputs de #checkboxes et detecter ceux qui sont checked
   un petit conseil au passage, separe ton js de ton html.
-->
<!--form method="post" class="multiselect" onChange="location.href=''+this.options[this.selectedIndex].value"-->
   <!--div id="selectBoxId" class="selectBox" onclick="showCheckboxes()"-->

<form class="multiselect" id="myForm"> <!-- supression de la method="post" pour "empecher" la validation, c'est nous qui le gerons via l'écriture d'url ligne 154 -->
   <div id="selectBoxId" class="selectBox">
       <select>
            <option selected>Tags</option>
       </select>
       <div class="overSelect"></div>
   </div>
             
   <div id="checkboxes">
      <!-- La boucle ici est le code spip qui appelle mes mots dans la base depuis le nom de la table (MOTS), son id (id_groupe=1) et par leurs titre -->
      <BOUCLE_Tags(MOTS) {id_groupe=1} {par titre} {pagination 20}>
        <label >
          <input type="checkbox" value="#URL_MOT"/>#TITRE
        </label>
      </BOUCLE_Tags>
   </div>  
       
   <input type="button" id="validateButton" class="submit" value="Recherche">
</form>

<script>
   var i,
       urlFinale = "",
       urlParametersArray = [],
       expanded = false,
       checkboxes = document.getElementById("checkboxes"),
       selectBoxId = document.getElementById("selectBoxId"),
       myForm = document.getElementById("myForm"),
       validateBtn = document.getElementById("validateButton"),
       checkboxesInputs = checkboxes.getElementsByTagName('input'),
       nbCheckboxesInputs = checkboxesInputs.length;
   
   function showCheckboxes() {
       if (!expanded) {
           checkboxes.style.display = "block";
           expanded = true;
       } else {
           checkboxes.style.display = "none";
           expanded = false;
       }
   }

   function addEventHandler(element, eventType, handler) {
       if (element.addEventListener) {
           element.addEventListener(eventType, handler, false);  
       } else {
           // < IE9
           element.attachEvent("on" + eventType, handler);
       }
   }

   for (i = 0; i < nbCheckboxesInputs; i++) {
       addEventHandler(checkboxesInputs[i], "change", function() {
           if (this.checked) {
               //console.log("yep");
               
               // il est checké, on contrôle si la valeur existe déjà dans le tableau (pour ne pas l'ajouter 2 fois).
               // ATTENTION methode Array.prototype.include() très peu supportée (cf mdn: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/includes)
               // je te fais grâce du polyfill, on va le faire à l'ancienne
               // doc indexOf : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/indexOf
               if (urlParametersArray.indexOf(this.value) === -1) {
                   // l'élément n'existe pas, on l'ajoute au tableau
                   // doc push : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/push
                   urlParametersArray.push(this.value);
                   
                   // debug purpose only, à supprimer en prod
                   console.table([urlParametersArray]);
               }
               
           } else {
               //console.log("nope");
               
               // ATTENTION, la checkbox n'est plus checkée, il va falloi retirer la valeur du tableau, on va se servir d'indexOf et de splice()
               // doc de splice : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/splice
               // Let's this shit begin...
               var index = urlParametersArray.indexOf(this.value);     // on récupère la position dans le tableau de la valeur à supprimer
               urlParametersArray.splice(index, 1);                    // on degage la valeur, le tableau est réindexé, merci qui ???
               
               // debug purpose only, à supprimer en prod
               console.table([urlParametersArray]);
           }
       });
   }

   addEventHandler(validateBtn, "click", function () {
       // doc join : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/join
       urlFinale = urlParametersArray.join("");
       location.href = urlParametersArray.join("");
   });

   addEventHandler(selectBoxId, "click", showCheckboxes);


   function function_name() {
   var titre =document.getElementById('TitreLD');
   var mon_titre = titre.textContent;
   console.log(mon_titre);
}
  function_name();
</script>

Merci d’avance pour votre aide.


  • Bonjour les amis, je sais que ça fait beaucoup de code a lire mais svp si pouviez me donner un peut de votre temps pour m’aider ce serait vraiment cool, vous me sortirez d’un long et grand galère et vous m’ôteriez un grand stresse car je dois fini ce formulaire pour demain en fin de journée.

    Alors depuis hier j’ai fais pas mal de recherche et je suis tombé sur un bout de code qui permet d’avoir une page de résultat qui regroupe les mots-clés (ou Tags) et leurs articles (en les additionnant). Alors j’ai compris vaguement le code et son fonctionnement mais il y a encore des des zones d’hombre. Comme par exemple, comment relié le formulaire a notre page de résultat (une fois avoir cocher plusieurs cases, et valider grâce au bouton) ? et si je devais adapté cette page de résultat à l’architecture de mon site, quel sont les choses que je pourrais modifié ?

    Alors je vous met ce bout de code :

    [(#REM)*********************** Début de la zone d 'affichage des articles trouves dans la recherche multicritères.*********************]

    <div id="resultat_recherche">

            <div id="nouvelle_recherche">
            <a href="#URL_RUBRIQUE" title="Nouvelle Recherche">Nouvelle recherche</a>
            </div>

                    [(#REM) On rappelle les mots clés sélectionnés par l'utilisateur. ]
                    [(#REM) Ca ne s'affiche pas au chargement de la page. Ca ne s'affiche que si la boucle motcleM est appelée, càd si on a cliqué sur le submit du formulaire.]
                    [(#REM) Si on n'a rien choisi dans les selects et qu'on clique submit, l'affichage renvoie "vous avez choisi d'utiliser 0 mot clé" et "0 article trouvé".]

                    #SET{ajouteun,1}
                    #SET{addition,0}

                    <B_motcleM>
                    <div class="cartouche">
                    <h1><:resultats_recherche:></h1>
                    <p>&nbsp;</p>
                    <p><strong>Dans votre recherche, vous avez choisi d'utiliser [(#GET{addition})]  [(#GET{addition}|=={0}|?{'mot clé.',[(#GET{addition}|>{1}|?{'mots clés :','mot clé :'})]})] </strong></p>
                    <ol>
                    <BOUCLE_motcleM(POUR) {tableau #ENV**{motcle}}>
                            <p class="soustitre">
                            <BOUCLE_multi(MOTS) {id_mot=#VALEUR}>
                            <li>[(#TYPE|supprimer_numero)] : <em><a href="#URL_MOT">[(#TITRE|supprimer_numero)][(#LOGO_MOT|image_reduire{20,20})]</a></em></li>
                            #SET{addition, #GET{addition}|plus{#GET{ajouteun}}}
                            </BOUCLE_multi>
                            </p>                               
                    </BOUCLE_motcleM>
                    </ol>
                    </div>



                                    [(#REM) Puis on construit le tableau qui contient tous les articles qui correspondent à au moins 1 mot clé sélectionné]

                                    #SET{art_select,#ARRAY}
                                    <B_select>
                                        <BOUCLE_select(POUR) {tableau #ENV**{motcle}} >
                                          <BOUCLE_ARTICLESSELECT(ARTICLES) {id_secteur=38} {id_mot=#VALEUR} >
                                           #SET{art_select, #GET{art_select}|push{ #ID_ARTICLE }}
                                          </BOUCLE_ARTICLESSELECT>
                               </BOUCLE_select>
                                     </B_select>
                                     <//B_select>
                                    [(#REM) Pour afficher le résultat du tableau, ajouter ici  [(#GET{art_select}|foreach)]   ]



                                    [(#REM) On finit par lister les articles qui apparaissent au moins une fois dans le tableau art_select (voir boucle BOUCLE_rangement) et le nombre de mots-clefs correspondant (voir boucle BOUCLE_ingr) ]

                                    #SET{un, 1}

                                    #SET{compteur_1, #ARRAY}
                                    #SET{compteur_2, #ARRAY}
                                    #SET{compteur_3, #ARRAY}
                                    #SET{compteur_4, #ARRAY}

                                    <B_rangement>

                                    [(#REM) Chaque article nouveau qui passe dans la boucle BOUCLE_rangement vient du tableau art_select (càd que c'est un article relié à AU MOINS un mot clé parmi les mots clé sélectionnés).]
                                    <BOUCLE_rangement(ARTICLES) {id_article IN #GET{art_select}}>

                                    [(#REM) Le compteur de mots clés sélectionnés reliés à l'article est une variable dont la valeur démarre à zéro pour chaque article nouveau qui passe dans la boucle BOUCLE_rangement.]
                                    #SET{compteur_sup,0}

                                [(#REM) Pour chaque article qui passe, on récupère l'id de l'article dans la variable article ci-dessous.]
                                #SET{article,#ID_ARTICLE}

                                                    [(#REM) on regarde dans le tableau art_select si le même article apparaît plusieurs fois.]
                                                    [(#REM) Explication : un même article peut appraître plusieurs fois, parce que art_select liste les articles qui on AU MOINS un mot clé parmi les mots clé sélectionnés ;]
                                                    [(#REM) donc si un article a 4 mots clés (A, B, C et D), il apparaît 1 fois pour A, 1 fois pour A+B, 1 fois pour A+B+C, 1 fois pour A+B+C+D ; donc ça fait 4 fois.]

                                                    <BOUCLE_ingr(POUR) {tableau #GET{art_select}}>

                                                            [(#REM) #VALEUR correspond à un #ID_ARTICLE dans le tableau art_select (on peut l'afficher avec #CLE=>#VALEUR) .]
                                                            [(#REM) On récupère l'id de l'article dans la variable valeur.]
                                                    #SET{valeur,#VALEUR}

                                                            [(#REM) Chaque fois que la soustraction des 2 id d'articles est égale à zéro, ça veut dire que les id étaient identiques.]

                                                            [(#REM) On fait la soustraction.]
                                                    #SET{dif, #GET{valeur}|moins{#GET{article}}}

                                                            [(#REM) Si le résiultat = 0, alors on incrémente la variable compteur_sup de 1 grâce à son addition avec la variable un. ]
                                                    [(#GET{dif}|=={0}|oui) #SET{compteur_sup, #GET{compteur_sup}|plus{#GET{un}}}]

                                                            [(#REM) A la fin (au sortir de BOUCLE_ingr), compteur_sup a une valeur maximale, qui correspond au nombre maximum de mots clés sélectionnés auxquels l'article qui passe dans BOUCLE_rangement est relié.]

                                                            [(#REM) On peut aussi afficher ici #GET{compteur_sup} pour vérifier combien il vaut.]

                                                  </BOUCLE_ingr>


                                    [(#REM) Ci-dessous, j'ai une ligne par compteur numéroté.]
                                    [(#REM) Ca va me permettre de classer l'article en fonction du nombre maximum de mots clés sélectionnés auxquels il est relié.]
                                    [(#REM) Chaque compteur numéroté est un tableau ARRAY vide au départ.]
                                    [(#REM) La boucle BOUCLE_ingr m'a donné le nombre maximal de mots clé reliés à l'article en train de passer dans la boucle BOUCLE_rangement.]
                                    [(#REM) Ce nombre, c'est la valeur de compteur_sup. ]
                                    [(#REM) Si la valeur de compteur_sup = 4, je colle le id de l'article dans le tableau compteur_4. Si sa valeur = 3, je colle le id de l'article dans le tableau compteur_3. Etc. ]

                                    [(#GET{compteur_sup}|=={4}|oui) #SET{compteur_4, #GET{compteur_4}|push{#ID_ARTICLE}}]
                                    [(#GET{compteur_sup}|=={3}|oui) #SET{compteur_3, #GET{compteur_3}|push{#ID_ARTICLE}}]
                                    [(#GET{compteur_sup}|=={2}|oui) #SET{compteur_2, #GET{compteur_2}|push{#ID_ARTICLE}}]
                                    [(#GET{compteur_sup}|=={1}|oui) #SET{compteur_1, #GET{compteur_1}|push{#ID_ARTICLE}}]       


                                    [(#REM) Mon formulaire contient 4 select, chacun pour un groupe de mots, les options des select c'est pour les mots du groupe).]
                                    [(#REM) Mes select ne sont pas multiples, donc un seul mot de chaque groupe sera sélectionné. Cela me fait 4 mots clés sélectionnables au max.]
                                    [(#REM) C'est pour ça qu'ici j'ai fait 4 compteurs numérotés.]
                                    [(#REM) Si les selects étaient multiples (plusieurs mots sélectionnables dans un select-groupe), ou si on avait des cases à cocher, on pourrait s'amuser à proposer des centaines de mots clés sélectionnables.]
                                    [(#REM) Donc il faudrait remplacer 4 par le nombre maxi de mots clés sélectionnables (ex: 150), puis créer des compteurs numérotés dégressifs (149,148, etc.).]
                                    [(#REM) Mais intellectuelmlement, l'utilisateur ne peut suivre que si on lui propose que peu de critères-groupes de choix. ]
                                    [(#REM) Avec des selects multiples, ou des cases à cocher, il faudrait donc, si les mots clés sont nombreux, ranger ces mots clés dans des critères-groupes de choix au sein desquels un seul choix n'est possible.]
                                    [(#REM) L'important, c'est de s'organiser pour ne pas avoir trop de mots clés à gérer ici.]

                                    [(#REM) Si je modifie mon formulaire, je dois ajouter (ou enlever des compteurs numérotés ci-dessous. ]               

                                    [(#REM) Pour voir le tableau des compteurs numérotés écrire ici : [(#GET{compteur_4}|foreach)]<br /> [(#GET{compteur_1}|foreach)]<br /> [(#GET{compteur_2}|foreach)]<br /> [(#GET{compteur_3}|foreach)]<br />  ]






                                    </BOUCLE_rangement>
                                    </B_rangement>
                                    <//B_rangement>

                    [(#REM) Code optionnel "après" de la boucle B_motcleM (ne s'affiche que si la boucle B_motcleM contient au moins une réponse).]
                    [(#REM) Ca ne s'affiche pas au chargement de la page. ]
                    [(#REM) Ca ne s'affiche que si la boucle motcleM est appelée (càd si on a cliqué sur le submuit du formulaire).]


                    [(#REM) On affiche le nombre d'articles trouvés dans la boucle rangement.]
                    <div class="cartouche">
    <hr />
                    <h2>[(#_rangement:GRAND_TOTAL)] [(#_rangement:GRAND_TOTAL|>{1}|?{'articles trouvés :','article trouvé.'})] </h2>
    <hr />
                    </div>


                    [(#REM) On affiche les articles trouvés en fonction des mots clés correspondants à ceux sélectionnés par l'utilisateur.]
                    [(#REM) Pour le faire, on va chercher les résultats dans les tableaux compteurs numérotés. On a donc ci-dessous 4 boucles affichage groupe numérotées.]
                    [(#REM) rappel #GET{addition}, c'est le Total des mots clés cochés dans la recherche.]


                            [(#REM) --------------- Affichage groupe 4: articles reliés à 4 mots clés. ---------------------]
                            [(#REM) --------------------------------------------------------------------------------------- ]

                            <B_affichage_groupe4>
    <div class="">
                            [(#ANCRE_PAGINATION|vide)]
                                    <h2><h2>[(#_affichage_groupe4:TOTAL_BOUCLE)] [(#_affichage_groupe4:TOTAL_BOUCLE|>{1}|?{'articles ont','article a'})] une correspondance de 4 mots clés sur [(#GET{addition})] : </h2>
    <p>&nbsp;</p>
                                    <ul>
                                    <BOUCLE_affichage_groupe4(ARTICLES) {id_article IN #GET{compteur_4}} {par date} {inverse}  {pagination 5}>
                                    <li>
                                                    [(#LOGO_ARTICLE{#URL_ARTICLE}|image_reduire{50,50})]
                                <a href="#URL_ARTICLE"><h3>[(#TITRE|supprimer_numero)]</h3></a>
                                <small>[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]</small>
                        </li>


                                            [(#REM) Ci-dessous, les mots clé sélectionnés qui sont associés à l'article.]
                                            [(#REM) Pour que l'utilisateur sache sur la base de quel(s) mot(s) clé(s) cet article peut être intéressant à aller voir.]

                                            <small>Mots correspondants : </small>

                                            [(#REM) On reliste les mots clés sélectionnés par l'utilisateur, mais on ne les affiche pas de suite.]
                                            <B_motcleM_gr_4>
                                            <BOUCLE_motcleM_gr_4(POUR) {tableau #ENV**{motcle}}>

                                                            [(#REM) Pour les lister, on reprend la même boucle mots qu'au début, mais on lui ajoute le critère {id_article=#ID_ARTICLE} .]
                                                            <B_MC_selected_article_gr_4>
                                                            <BOUCLE_MC_selected_article_gr_4(MOTS) {id_mot=#VALEUR} {id_article=#ID_ARTICLE}>
                                                            <a href="#URL_MOT"><em><small>[(#TITRE|supprimer_numero)] - </small></em></a>

                                                            </BOUCLE_MC_selected_article_gr_4>
                                                            </B_MC_selected_article_gr_4>                                       

                                            </BOUCLE_motcleM_gr_4>
                                            </B_motcleM_gr_4>
    <br />
    <br />

                        </BOUCLE_affichage_groupe4>

                                    </ul>
                            [<p class="pagination">(#PAGINATION{page})</p>]
                            <p>~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~</p>
                            </div>
                                    </B_affichage_groupe4>
                                    [(#REM) <em>Pas d'articles reliés.</em> ]
                                    <//B_affichage_groupe4>       



                            [(#REM) --------------- Affichage groupe 3: articles reliés à 3 mots clés. ---------------------]
                            [(#REM) --------------------------------------------------------------------------------------- ]

                            <B_affichage_groupe3>
    <div class="">
                            [(#ANCRE_PAGINATION|vide)]
                                    <h2>[(#_affichage_groupe3:TOTAL_BOUCLE)] [(#_affichage_groupe3:TOTAL_BOUCLE|>{1}|?{'articles ont','article a'})] une correspondance de 3 mots clés sur [(#GET{addition})] : </h2>
    <p>&nbsp;</p>
                                    <ul>
                                    <BOUCLE_affichage_groupe3(ARTICLES) {id_article IN #GET{compteur_3}} {par date} {inverse}  {pagination 5}>
                                    <li>
                                                    [(#LOGO_ARTICLE{#URL_ARTICLE}|image_reduire{50,50})]
                                <a href="#URL_ARTICLE"><h3>[(#TITRE|supprimer_numero)]</h3></a>
                                <small>[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]</small>
                        </li>


                                            [(#REM) Ci-dessous, les mots clé sélectionnés qui sont associés à l'article.]
                                            [(#REM) Pour que l'utilisateur sache sur la base de quel(s) mot(s) clé(s) cet article peut être intéressant à aller voir.]

                                            <small>Mots correspondants : </small>

                                            [(#REM) On reliste les mots clés sélectionnés par l'utilisateur, mais on ne les affiche pas de suite.]
                                            <B_motcleM_gr_3>
                                            <BOUCLE_motcleM_gr_3(POUR) {tableau #ENV**{motcle}}>

                                                            [(#REM) Pour les lister, on reprend la même boucle mots qu'au début, mais on lui ajoute le critère {id_article=#ID_ARTICLE} .]
                                                            <B_MC_selected_article_gr_3>
                                                            <BOUCLE_MC_selected_article_gr_3(MOTS) {id_mot=#VALEUR} {id_article=#ID_ARTICLE}>
                                                            <a href="#URL_MOT"><em><small>[(#TITRE|supprimer_numero)] - </small></em></a>
                                                            </BOUCLE_MC_selected_article_gr_3>
                                                            </B_MC_selected_article_gr_3>                                       

                                            </BOUCLE_motcleM_gr_3>
                                            </B_motcleM_gr_3>
    <br />
    <br />

                        </BOUCLE_affichage_groupe3>

                                    </ul>
                            [<p class="pagination">(#PAGINATION{page})</p>]
                            <p>~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~</p>
                            </div>
                                    </B_affichage_groupe3>
                                    [(#REM) <em>Pas d'articles reliés.</em> ]
                                    <//B_affichage_groupe3>               



                            [(#REM) --------------- Affichage groupe 2: articles reliés à 2 mots clés. ---------------------]
                            [(#REM) --------------------------------------------------------------------------------------- ]

                            <B_affichage_groupe2>
    <div class="">
                            [(#ANCRE_PAGINATION|vide)]
                                    <h2>[(#_affichage_groupe2:TOTAL_BOUCLE)] [(#_affichage_groupe2:TOTAL_BOUCLE|>{1}|?{'articles ont','article a'})] une correspondance de 2 mots clés sur [(#GET{addition})] : </h2>
    <p>&nbsp;</p>
                                    <ul>
                                    <BOUCLE_affichage_groupe2(ARTICLES) {id_article IN #GET{compteur_2}} {par date} {inverse}  {pagination 5}>
                                    <li>
                                                    [(#LOGO_ARTICLE{#URL_ARTICLE}|image_reduire{50,50})]
                                <a href="#URL_ARTICLE"><h3>[(#TITRE|supprimer_numero)]</h3></a>
                                <small>[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]</small>
                        </li>


                                            [(#REM) Ci-dessous, les mots clé sélectionnés qui sont associés à l'article.]
                                            [(#REM) Pour que l'utilisateur sache sur la base de quel(s) mot(s) clé(s) cet article peut être intéressant à aller voir.]

                                            <small>Mots correspondants : </small>

                                            [(#REM) On reliste les mots clés sélectionnés par l'utilisateur, mais on ne les affiche pas de suite.]
                                            <B_motcleM_gr_2>
                                            <BOUCLE_motcleM_gr_2(POUR) {tableau #ENV**{motcle}}>

                                                            [(#REM) Pour les lister, on reprend la même boucle mots qu'au début, mais on lui ajoute le critère {id_article=#ID_ARTICLE} .]
                                                            <B_MC_selected_article_gr_2>
                                                            <BOUCLE_MC_selected_article_gr_2(MOTS) {id_mot=#VALEUR} {id_article=#ID_ARTICLE}>
                                                            <a href="#URL_MOT"><em><small>[(#TITRE|supprimer_numero)] - </small></em></a>

                                                            </BOUCLE_MC_selected_article_gr_2>
                                                            </B_MC_selected_article_gr_2>                                       

                                            </BOUCLE_motcleM_gr_2>
                                            </B_motcleM_gr_2>
    <br />
    <br />

                        </BOUCLE_affichage_groupe2>

                                    </ul>
                            [<p class="pagination">(#PAGINATION{page})</p>]
                            <p>~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~</p>
                            </div>
                                    </B_affichage_groupe2>
                                    [(#REM) <em>Pas d'articles reliés.</em> ]
                                    <//B_affichage_groupe2>               



                            [(#REM) --------------- Affichage groupe 1: articles reliés à 1 mot clé. ---------------------]
                            [(#REM) --------------------------------------------------------------------------------------- ]

                            <B_affichage_groupe1>
    <div class="">
                            [(#ANCRE_PAGINATION|vide)]
                                    <h2>[(#_affichage_groupe1:TOTAL_BOUCLE)] [(#_affichage_groupe1:TOTAL_BOUCLE|>{1}|?{'articles ont','article a'})] une correspondance de 1 mot clé sur [(#GET{addition})] : </h2>
    <p>&nbsp;</p>
                                    <ul>
                                    <BOUCLE_affichage_groupe1(ARTICLES) {id_article IN #GET{compteur_1}} {par date} {inverse}  {pagination 5}>
                                    <li>
                                                    [(#LOGO_ARTICLE{#URL_ARTICLE}|image_reduire{50,50})]
                                <a href="#URL_ARTICLE"><h3>[(#TITRE|supprimer_numero)]</h3></a>
                                <small>[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]</small>
                        </li>


                                            [(#REM) Ci-dessous, les mots clé sélectionnés qui sont associés à l'article.]
                                            [(#REM) Pour que l'utilisateur sache sur la base de quel(s) mot(s) clé(s) cet article peut être intéressant à aller voir.]


                                            <small>Mots correspondants : </small>

                                            [(#REM) On reliste les mots clés sélectionnés par l'utilisateur, mais on ne les affiche pas de suite.]
                                            <B_motcleM_gr_1>
                                            <BOUCLE_motcleM_gr_1(POUR) {tableau #ENV**{motcle}}>

                                                            [(#REM) Pour les lister, on reprend la même boucle mots qu'au début, mais on lui ajoute le critère {id_article=#ID_ARTICLE} .]
                                                            <B_MC_selected_article_gr_1>
                                                            <BOUCLE_MC_selected_article_gr_1(MOTS) {id_mot=#VALEUR} {id_article=#ID_ARTICLE}>
                                                            <a href="#URL_MOT"><em><small>[(#TITRE|supprimer_numero)] - </small></em></a>

                                                            </BOUCLE_MC_selected_article_gr_1>
                                                            </B_MC_selected_article_gr_1>                                       

                                            </BOUCLE_motcleM_gr_1>
                                            </B_motcleM_gr_1>
    <br />
    <br />


                        </BOUCLE_affichage_groupe1>

                                    </ul>
                            [<p class="pagination">(#PAGINATION{page})</p>]
                            <p>~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~</p>
                            </div>
                                    </B_affichage_groupe1>
                                    [(#REM) <em>Pas d'articles reliés.</em> ]
                                    <//B_affichage_groupe1>               






                    [(#REM) Balises de fin de la boucle B_motcleM. ]
                    </B_motcleM>
                    <//B_motcleM>


    </div> <!-- Fin de la div id="resultat_recherche" -->

    [(#REM)*********************** Fin de la zone d 'affichage des articles trouves dans la recherche multicritères.*********************]

  • Bonjour,
    Quelqu’un peut me répondre svp ?
    Aujourd’hui c’est le jour décisif pour moi, je dois finir ce formulaire d’ici ce soir.

    Aidez moi svp, contactez vos amis, des gens que vous connaissez, n’hésitez pas a leur demander un peut de leur temps svp ! Je vous en prie !


  • Encore moi,
    Je vous met le code que j’ai mis un plus haute qui permet avoir une page résultat.
    Dites moi s’il y a des erreurs et s’il y a des choses a rajouté.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    [(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    ]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
    <!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
    <!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
    <!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
    head>
    <script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
    <title><:resultats_recherche:> - [(#NOM_SITE_SPIP|textebrut)]</title>
    <INCLURE{fond=inclure/head} />
    <meta name="robots" content="none" />
    </head>

    <body class="pas_surlignable page_rubrique">
    <div class="page">

            <INCLURE{fond=inclure/header} />
            <INCLURE{fond=inclure/nav,env} />

                <div class="main">
                    [(#REM) Contenu principal : Resultats de la recherche ]
                    <div class="wrapper">
                            <p class="arbo"><a href="#URL_SITE_SPIP/"><:accueil_site:></a> &gt; <:info_recherche_a_liste_deroulante:>[ &gt; <strong class="on">(#RECHERCHE)</strong>]</p>

                    <div class="content" id="content">

                            [(#REM)*********************** Début de la zone d 'affichage des articles trouves dans la recherche multicritères.*********************]
                             
                            <div id="resultat_recherche">
                             
                                    <div id="nouvelle_recherche">
                                    <a href="http://localhost/stage/recherche_a_liste_deroulante.html" title="Recherche a liste deroulante">Recherche a liste deroulante</a>
                                    </div>
                             
                                            [(#REM) On rappelle les mots clés sélectionnés par l'utilisateur. ]
                                            [(#REM) Ca ne s'affiche pas au chargement de la page. Ca ne s'affiche que si la boucle motcleM est appelée, càd si on a cliqué sur le submit du formulaire.]
                                            [(#REM) Si on n'a rien choisi dans les selects et qu'on clique submit, l'affichage renvoie "vous avez choisi d'utiliser 0 mot clé" et "0 article trouvé".]
                             
                                            #SET{ajouteun,1}
                                            #SET{addition,0}
                             
                                            <B_motcleM>
                                            <div class="cartouche">
                                            <h1><:resultats_recherche:></h1>
                                            <p>&nbsp;</p>
                                            <p><strong>Dans votre recherche, vous avez choisi d'utiliser [(#GET{addition})]  [(#GET{addition}|=={0}|?{'mot clé.',[(#GET{addition}|>{1}|?{'mots clés :','mot clé :'})]})] </strong></p>
                                            <ol>
                                            <BOUCLE__Tags(MOTS) {tableau #ENV**{motcle}} {id_groupe=1} {par titre}> <!-- <BOUCLE_motcleM(POUR) remplacé par __Tags(MOTS) -->
                                                    <p class="soustitre">
                                                    <BOUCLE_articles(ARTICLES) {id_mot=#VALEUR}><!-- <BOUCLE_multi(MOTS) remplacé par _articles(ARTICLES)-->
                                                    <li><a href="#URL_ARTICLE">
                                                            <strong>[(#LOGO_ARTICLE|right||image_passe_partout{120,100}|image_recadre{120,100,center})]#TITRE</strong>
                                                            <br /><small>[(#CHAPO*|textebrut|couper{180})]</small></a>
                                                    </li>
                                                    #SET{addition, #GET{addition}|plus{#GET{ajouteun}}}
                                                    </BOUCLE_articles>
                                                    </p>                               
                                            </BOUCLE__Tags>
                                            </ol>
                                            </div>
                             
                             
                             
                                                            [(#REM) Puis on construit le tableau qui contient tous les articles qui correspondent à au moins 1 mot clé sélectionné]
                             
                                                            #SET{art_select,#ARRAY}
                                                            <B_select>
                                                                <BOUCLE_selectTags(MOTS) {tableau #ENV**{motcle}} {id_groupe=1} {par titre}>
                                                                  <BOUCLE_articlesselect(ARTICLES) {id_mot} {par num titre} {!par date}
                                                                            #SET{art_select, #GET{art_select}|push{ #ID_ARTICLE }}
                                                                    </BOUCLE_articlesselect>
                                                        </BOUCLE_selectTags>
                                                              </B_select>
                                                              <//B_select>
                                                             [(#REM) Pour afficher le résultat du tableau, ajouter ici  [(#GET{art_select}|foreach)]   ]
                             
                             
                             
                                                            [(#REM) On finit par lister les articles qui apparaissent au moins une fois dans le tableau art_select (voir boucle BOUCLE_rangement) et le nombre de mots-clefs correspondant (voir boucle BOUCLE_ingr) ]
                             
                                                            #SET{un, 1}
                             
                                                            #SET{compteur_1, #ARRAY}
                                                            #SET{compteur_2, #ARRAY}
                                                            #SET{compteur_3, #ARRAY}
                                                            #SET{compteur_4, #ARRAY}

                                                            #SET{compteur_5, #ARRAY}
                                                            #SET{compteur_6, #ARRAY}
                                                            #SET{compteur_7, #ARRAY}
                                                            #SET{compteur_8, #ARRAY}

                                                            #SET{compteur_9, #ARRAY}
                                                            #SET{compteur_10, #ARRAY}
                             
                                                            <B_rangement>
                             
                                                            [(#REM) Chaque article nouveau qui passe dans la boucle BOUCLE_rangement vient du tableau art_select (càd que c'est un article relié à AU MOINS un mot clé parmi les mots clé sélectionnés).]
                                                            <BOUCLE_rangement(ARTICLES) {id_article IN #GET{art_select}}>
                             
                                                            [(#REM) Le compteur de mots clés sélectionnés reliés à l'article est une variable dont la valeur démarre à zéro pour chaque article nouveau qui passe dans la boucle BOUCLE_rangement.]
                                                            #SET{compteur_sup,0}
                             
                                                        [(#REM) Pour chaque article qui passe, on récupère l'id de l'article dans la variable article ci-dessous.]
                                                        #SET{article,#ID_ARTICLE}
                             
                                                                            [(#REM) on regarde dans le tableau art_select si le même article apparaît plusieurs fois.]
                                                                            [(#REM) Explication : un même article peut appraître plusieurs fois, parce que art_select liste les articles qui on AU MOINS un mot clé parmi les mots clé sélectionnés ;]
                                                                            [(#REM) donc si un article a 4 mots clés (A, B, C et D), il apparaît 1 fois pour A, 1 fois pour A+B, 1 fois pour A+B+C, 1 fois pour A+B+C+D ; donc ça fait 4 fois.]
                             
                                                                            <BOUCLE_ingr(POUR) {tableau #GET{art_select}}>
                             
                                                                                    [(#REM) #VALEUR correspond à un #ID_ARTICLE dans le tableau art_select (on peut l'afficher avec #CLE=>#VALEUR) .]
                                                                                    [(#REM) On récupère l'id de l'article dans la variable valeur.]
                                                                            #SET{valeur,#VALEUR}
                             
                                                                                    [(#REM) Chaque fois que la soustraction des 2 id d'articles est égale à zéro, ça veut dire que les id étaient identiques.]
                             
                                                                                    [(#REM) On fait la soustraction.]
                                                                            #SET{dif, #GET{valeur}|moins{#GET{article}}}
                             
                                                                                    [(#REM) Si le résiultat = 0, alors on incrémente la variable compteur_sup de 1 grâce à son addition avec la variable un. ]
                                                                            [(#GET{dif}|=={0}|oui) #SET{compteur_sup, #GET{compteur_sup}|plus{#GET{un}}}]
                             
                                                                                    [(#REM) A la fin (au sortir de BOUCLE_ingr), compteur_sup a une valeur maximale, qui correspond au nombre maximum de mots clés sélectionnés auxquels l'article qui passe dans BOUCLE_rangement est relié.]
                             
                                                                                    [(#REM) On peut aussi afficher ici #GET{compteur_sup} pour vérifier combien il vaut.]
                             
                                                                          </BOUCLE_ingr>
                             
                             
                                                            [(#REM) Ci-dessous, j'ai une ligne par compteur numéroté.]
                                                            [(#REM) Ca va me permettre de classer l'article en fonction du nombre maximum de mots clés sélectionnés auxquels il est relié.]
                                                            [(#REM) Chaque compteur numéroté est un tableau ARRAY vide au départ.]
                                                            [(#REM) La boucle BOUCLE_ingr m'a donné le nombre maximal de mots clé reliés à l'article en train de passer dans la boucle BOUCLE_rangement.]
                                                            [(#REM) Ce nombre, c'est la valeur de compteur_sup. ]
                                                            [(#REM) Si la valeur de compteur_sup = 4, je colle le id de l'article dans le tableau compteur_4. Si sa valeur = 3, je colle le id de l'article dans le tableau compteur_3. Etc. ]
                                                            


                                                            [(#GET{compteur_sup}|=={10}|oui) #SET{compteur_10, #GET{compteur_10}|push{#ID_ARTICLE}}]
                                                            [(#GET{compteur_sup}|=={9}|oui) #SET{compteur_9, #GET{compteur_9}|push{#ID_ARTICLE}}]

                                                             [(#GET{compteur_sup}|=={8}|oui) #SET{compteur_8, #GET{compteur_8}|push{#ID_ARTICLE}}]
                                                            [(#GET{compteur_sup}|=={7}|oui) #SET{compteur_7, #GET{compteur_7}|push{#ID_ARTICLE}}]
                                                            [(#GET{compteur_sup}|=={6}|oui) #SET{compteur_6, #GET{compteur_6}|push{#ID_ARTICLE}}]
                                                            [(#GET{compteur_sup}|=={5}|oui) #SET{compteur_5, #GET{compteur_5}|push{#ID_ARTICLE}}]       
                             
                                                            [(#GET{compteur_sup}|=={4}|oui) #SET{compteur_4, #GET{compteur_4}|push{#ID_ARTICLE}}]
                                                            [(#GET{compteur_sup}|=={3}|oui) #SET{compteur_3, #GET{compteur_3}|push{#ID_ARTICLE}}]
                                                            [(#GET{compteur_sup}|=={2}|oui) #SET{compteur_2, #GET{compteur_2}|push{#ID_ARTICLE}}]
                                                            [(#GET{compteur_sup}|=={1}|oui) #SET{compteur_1, #GET{compteur_1}|push{#ID_ARTICLE}}]       
                             
                             
                                                            [(#REM) Mon formulaire contient 4 select, chacun pour un groupe de mots, les options des select c'est pour les mots du groupe).]
                                                            [(#REM) Mes select ne sont pas multiples, donc un seul mot de chaque groupe sera sélectionné. Cela me fait 4 mots clés sélectionnables au max.]
                                                            [(#REM) C'est pour ça qu'ici j'ai fait 4 compteurs numérotés.]
                                                            [(#REM) Si les selects étaient multiples (plusieurs mots sélectionnables dans un select-groupe), ou si on avait des cases à cocher, on pourrait s'amuser à proposer des centaines de mots clés sélectionnables.]
                                                            [(#REM) Donc il faudrait remplacer 4 par le nombre maxi de mots clés sélectionnables (ex: 150), puis créer des compteurs numérotés dégressifs (149,148, etc.).]
                                                            [(#REM) Mais intellectuelmlement, l'utilisateur ne peut suivre que si on lui propose que peu de critères-groupes de choix. ]
                                                            [(#REM) Avec des selects multiples, ou des cases à cocher, il faudrait donc, si les mots clés sont nombreux, ranger ces mots clés dans des critères-groupes de choix au sein desquels un seul choix n'est possible.]
                                                            [(#REM) L'important, c'est de s'organiser pour ne pas avoir trop de mots clés à gérer ici.]
                             
                                                            [(#REM) Si je modifie mon formulaire, je dois ajouter (ou enlever des compteurs numérotés ci-dessous. ]               
                             
                                                            [(#REM) Pour voir le tableau des compteurs numérotés écrire ici : [(#GET{compteur_4}|foreach)]<br /> [(#GET{compteur_1}|foreach)]<br /> [(#GET{compteur_2}|foreach)]<br /> [(#GET{compteur_3}|foreach)]<br />  ]
                             
                             
                             
                             
                             
                             
                             
                             
                             
                             
                             
                                            [(#REM) Balises de fin de la boucle B_motcleM. ]
                                            </B_motcleM>
                                            <//B_motcleM>
                             
                             
                            </div> <!-- Fin de la div id="resultat_recherche" -->
                             
                            [(#REM)*********************** Fin de la zone d 'affichage des articles trouves dans la recherche multicritères.*********************]




                    </div><!--.content-->
                    </div><!--.wrapper-->

                    <div class="aside">
           <BOUCLE_focus(RUBRIQUES){id_rubrique = 19}>
                    [(#FOCUS|image_reduire{260,0})]
                    </BOUCLE_focus>

                            <INCLURE{fond=inclure/navsub, id_rubrique} />
                            <INCLURE{fond=inclure/cherche} /><!--Recherche et réseaux sociaux-->
                            <INCLURE{fond=inclure/listederoulante} />
                           
                    </div><!--.aside-->
            </div><!--.main-->

            <INCLURE{fond=inclure/footer,self=#SELF} />

    </div><!--.page-->
    </body>
    </html>

    Merci.

    Et je vous remet le code HTML (non séparer de ses fonctions JS et de ses CSS pour l’instant) :

    <style>
       .multiselect {
           width: 200px;
       }

       .selectBox {
           position: relative;
       }

       .selectBox select {
           width: 100%;
           font-weight: bold;
       }

       .overSelect {
           position: absolute;
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
       }

       #checkboxes {
           display: none;
           border: 1px #dadada solid;
           background-color: gray;
       }

       #checkboxes label {
           display: block;
       }

       #checkboxes label:hover {
           background-color: yellow;
       }
    </style>

    <!--
       fait reference à la valeur du selectedIndex de selectBox, toi tu veux bosser sur les valeurs de #checkboxes
       tu devras boucler sur les differents inputs de #checkboxes et detecter ceux qui sont checked
       un petit conseil au passage, separe ton js de ton html.
    -->
    <!--form method="post" class="multiselect" onChange="location.href=''+this.options[this.selectedIndex].value"-->
       <!--div id="selectBoxId" class="selectBox" onclick="showCheckboxes()"-->
    <div class="formulaire_spip formulaire_recherche_a_liste_deroulante">
    <a name="formulaire_recherche_a_liste_deroulante" id="formulaire_recherche_a_liste_deroulante"></a>
    <form class="multiselect" id="myForm" action="[(#ENV{action})]"> <!-- supression de la method="post" pour "empecher" la validation, c'est nous qui le gerons via l'écriture d'url ligne 154 -->
       <div id="selectBoxId" class="selectBox">
           <select>
                <option selected>Tags</option>
           </select>
           <div class="overSelect"></div>
       </div>
                 
       <div id="checkboxes">
          <!-- La boucle ici est le code spip qui appelle mes mots dans la base depuis le nom de la table (MOTS), son id (id_groupe=1) et par leurs titre -->
          <BOUCLE_Tags(MOTS) {id_groupe=1} {par titre} {pagination 20}>
            <label >
              <input type="checkbox" class="checkbox" value="#URL_MOT"/>#TITRE
              <!-- <BOUCLE_articles(ARTICLES) {id_mot} {par num titre} {!par date} {pagination 20}>
                   <span id="pagesArticles" style="display: none;"><a href="#URL_ARTICLE"></a></span>
               </BOUCLE_articles> -->
            </label>
          </BOUCLE_Tags>
       </div>  
           
       <input type="button" id="validateButton" class="submit" value="Recherche"  title="<:info_recherche_a_liste_deroulante:>">
    </form>
    </div>



    <script>
       var i,
           urlFinale = "",
           urlParametersArray = [],
           expanded = false,
           checkboxes = document.getElementById("checkboxes"),
           selectBoxId = document.getElementById("selectBoxId"),
           myForm = document.getElementById("myForm"),
           validateBtn = document.getElementById("validateButton"),
           checkboxesInputs = checkboxes.getElementsByTagName('input'),
           nbCheckboxesInputs = checkboxesInputs.length;
       
       function showCheckboxes() {
           if (!expanded) {
               checkboxes.style.display = "block";
               expanded = true;
           } else {
               checkboxes.style.display = "none";
               expanded = false;
           }
       }

       function addEventHandler(element, eventType, handler) {
           if (element.addEventListener) {
               element.addEventListener(eventType, handler, false);  
           } else {
               // < IE9
               element.attachEvent("on" + eventType, handler);
           }
       }

       for (i = 0; i < nbCheckboxesInputs; i++) {
           addEventHandler(checkboxesInputs[i], "change", function() {
               if (this.checked) {
                   //console.log("yep");
                   
                   // il est checké, on contrôle si la valeur existe déjà dans le tableau (pour ne pas l'ajouter 2 fois).
                   // ATTENTION methode Array.prototype.include() très peu supportée (cf mdn: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/includes)
                   // je te fais grâce du polyfill, on va le faire à l'ancienne
                   // doc indexOf : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/indexOf
                   if (urlParametersArray.indexOf(this.value) === -1) {
                       // l'élément n'existe pas, on l'ajoute au tableau
                       // doc push : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/push
                       urlParametersArray.push(this.value);
                       
                       // debug purpose only, à supprimer en prod
                       console.table([urlParametersArray]);
                   }
                   
               } else {
                   //console.log("nope");
                   
                   // ATTENTION, la checkbox n'est plus checkée, il va falloi retirer la valeur du tableau, on va se servir d'indexOf et de splice()
                   // doc de splice : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/splice
                   // Let's this shit begin...
                   var index = urlParametersArray.indexOf(this.value);     // on récupère la position dans le tableau de la valeur à supprimer
                   urlParametersArray.splice(index, 1);                    // on degage la valeur, le tableau est réindexé, merci qui ???
                   
                   // debug purpose only, à supprimer en prod
                   console.table([urlParametersArray]);
               }
           });
       }

       addEventHandler(validateBtn, "click", function () {
           // doc join : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/join
           urlFinale = urlParametersArray.join("");
           location.href = urlParametersArray.join("");
       });

       addEventHandler(selectBoxId, "click", showCheckboxes);


      //  function function_name()
      //  {
      //      var titre =document.getElementById('TitreLD');
      //      var mon_titre = titre.innerText || titre.textContent;
      //      console.log(mon_titre);
      //  }
      // function_name();
    </script>

    Merci encore une fois.




Répondre à la question

« Assemblé titres et articles de plusieurs pages(squelettes) sur une nouvelle pages(squelettes). »

Mots-clés

Vous pouvez étiqueter cette page de forum avec les mots-clés qui vous semblent les plus appropriés ; ils permettront aux prochains visiteurs du site de mieux se repérer :


Installation, mise à jour

Utilisation de l’espace privé

Administration, gestion, configuration du site

Créer ses squelettes

Qui êtes-vous ?