3
Indiquez l’intérêt que vous portez à cette question
0

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

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’accueill) :

<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.