Comment conserver les valeurs d'un form dans un affichage avec pagination ?

KMATHIEU · Février 24, 2024, 3:18

Bonjour,

J’ai créé un « form » qui m’affiche une liste d’articles.

Mon problème : lorsque je clique sur la pagination, je perds la valeur qui était sélectionnée dans le « form ».

J’ai bien essayé d’ajaxer le « form » mais cela ne change rien…

Si quelqu’un a une idée pour solutionner ce problème, je suis preneur. je n’ai malheureusement rien trouvé de probant lors de mes recherches.

Si cela peut aider, ci-dessous, une version très simplifiée de mon code (en réalité j’ai beaucoup plus de paramètres sélectionnables dans mon « form ») :

Fichier « rubrique=6.html » :

<div>
 <div>
   <form action="#SELF" method="post" id="consulter_actus">
   <BOUCLE_actu_controleur(ARTICLES){0,1}>
      <label for="rub_select">Rubrique</label>
      <select name="selection" id="rub_select">
         <option value="">Sélectionner une rubrique</option>
         <BOUCLE_selection(RUBRIQUES){profondeur=1}{par titre}>
         [<option VALUE="[(#ID_RUBRIQUE)]"[(#ENV{selection}|=={[(#ID_RUBRIQUE)]}|?{' selected="selected"',''})]>(#TITRE)</option>]
         </BOUCLE_selection>
      </select>
      <button type='submit' class='button small' type='submit'><:bouton_filtrer:></button>
   </BOUCLE_actu_controleur>
   </form>
 </div>
 <INCLURE{fond=modeles/selection_articles,ajax,env} />
</div>

Fichier « selection_articles.html » :

<B_page>
#ANCRE_PAGINATION
<ul>
<BOUCLE_page(ARTICLES){id_secteur=2}{id_parent == #ENV{selection}}{par id_rubrique, num titre}{pagination}>
   <li><a href="#URL_ARTICLE">#TITRE</a> - [(#INFO_TITRE{rubrique, #ID_PARENT})] - [(#INFO_TITRE{rubrique, #ID_RUBRIQUE})]</li>
</BOUCLE_page>
</ul>
[<nav role="navigation" class="pagination">(#PAGINATION{perso})</nav>]
</B_page>

Page au chargement :
Capture-01

Page une fois une valeur sélectionnée dans le « form » :
Capture-02

Page après avoir cliqué sur une valeur de pagination (cela réinitialise le « form » :
Capture-03

JLuc · Février 24, 2024, 4:55

Salut
Je vois que tu utilises une inclusion à part avec de nouvelles boucles pour afficher la pagination. Je me demande si ça ne te prive de facilités fournies par spip. Peut être cela irait il mieux si tu te créais un modèle de pagination ainsi que SPIP te le permet - Cf la doc Le système de pagination - SPIP Pour ça mais pour d’autres précisions utiles aussi, sur « inclusions et pagination » par exemple, cette page mérite que tu la lises en détail si c’est pas déjà fait.

KMATHIEU · Février 25, 2024, 12:28

Merci pour l’aiguillage vers la doc pagination. Je l’ai re-parcourue mais il n’y a pas vraiment d’exemple dans lequel serait associé une pagination avec la sélection d’un paramètre depuis un formulaire.

J’ai essayé de rédiger différemment pour voir si le problème pouvait venir de l’agencement de mes différentes boucles, mais pour le moment je retombe toujours sur le même résultat, à savoir que le paramètre sélectionné dans le formulaire est perdu dès que je clique sur une valeur de pagination…

Je continue d’explorer.

A toute fin utile, la version rédigée différemment :

Fichier « rubrique=6.html » :

<div>
   <INCLURE{fond=inclure/page_paginee,ajax,env}>
</div>

Fichier « page_paginee.html » :

<B_art>
<div>
   <form action="#SELF" method="post" id="choix_rubrique">
      <label for="rub_select">Rubrique</label>
      <select name="selection_1" id="rub_select">
         <option value="">Sélectionner une rubrique</option>
         <BOUCLE_test_selection(RUBRIQUES){profondeur=1}{par titre}>
         [<option VALUE="[(#ID_RUBRIQUE)]"[(#ENV{selection_1}|=={[(#ID_RUBRIQUE)]}|?{' selected="selected"',''})]>(#TITRE)</option>]
         </BOUCLE_test_selection>
      </select>
      <button type='submit' class='button small' type='submit'><:bouton_filtrer:></button>
   </form>
   [(#ANCRE_PAGINATION)]
  <ul>
   <BOUCLE_art(ARTICLES) {id_parent == #ENV{selection_1}}{par date}{inverse} {pagination 10 #ENV{nom_p}}>
      <li><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></li>
   </BOUCLE_art>
   </ul>
   <p>#PAGINATION</p>
</div>
</B_art>

JLuc · Février 25, 2024, 12:44

Peut être s’en souviendrait il si tu met la valeur dans un input hidden, à la main ou avec form_hidden cf |form_hidden - SPIP

KMATHIEU · Février 25, 2024, 9:23

J’ai essayé d’intégrer un input hidden dans mon form, mais après je ne sais pas trop quoi en faire .

   <form action="#SELF" method="post" id="choix_rubrique">
      <label for="rub_select">Rubrique</label>
      <select name="selection_1" id="rub_select">
         <option value="">Sélectionner une rubrique</option>
         <BOUCLE_test_selection(RUBRIQUES){profondeur=1}{par titre}>
         [<option VALUE="[(#ID_RUBRIQUE)]"[(#ENV{selection_1}|=={[(#ID_RUBRIQUE)]}|?{' selected="selected"',''})]>(#TITRE)</option>]
         </BOUCLE_test_selection>
      </select>
      <input type='hidden' name="bidule" id="rub_select" value="[(#ENV{selection})]" />
      <button type='submit' class='button small' type='submit'><:bouton_filtrer:></button>
   </form>

En faisant tout un tas de tests, je pense avoir trouvé où il me faut fixer en « dur » la valeur sélectionnée dans mon « form », mais je ne trouve pas le moyen de stocker la valeur sélectionnée de sorte à ce qu’elle persiste après un clic sur une valeur de pagination…

<div>
   <INCLURE{fond=inclure/page_paginee, ajax, env, selection_1=14}>
</div>

Le chiffre 14 correspondant ici à l’un des numéros de rubrique disponibles dans mon « form ». Je voudrais pouvoir indiquer quelque chose comme ceci :

<div>
   #SET{ma_valeur,#ENV{selection_1}}
   <INCLURE{fond=inclure/page_paginee, ajax, env, selection_1=#GET{ma_valeur}} />
</div>

Mais le SET se réinitialise dès que je clique sur une valeur de pagination.

En piste alternative, il y a les infos de la page suivante Liens AJAX qui me semblent être une bonne piste car j’arrive à reproduire l’exemple, c’est-à-dire donner le choix pour afficher le résumé des articles sans pour autant que ce choix ne se perde en avançant dans la pagination. Seulement je ne vois pas comment l’adapter à mon exemple pour lequel il faudrait basculer la valeur de mon « form » dans le parametre_url si je comprends bien.

touti · Février 26, 2024, 1:49

Effectivement, il faut passer l’environnement généré par ton form à ton inclure.
Le hic, c’est qu’il faut en plus que ce soit ‹ immédiat ›, or cela n’est faisable qu’avec en plus du javascript.
Je me suis amusée à te trouver la solution que voici
Ta page principale

<BOUCLE_rubriques(RUBRIQUES){id_rubrique}{tout}>
<h1><a href="#URL_RUBRIQUE">#TITRE N°#ID_RUBRIQUE</a></h1>

    <!-- ajax sur le formulaire + id sur le button -->			 
	<div class="ajax">
   
	    <form action="[(#URL_RUBRIQUE|parametre_url{_id_rubrique,#ENV{_id_rubrique}})]" method="post" id="consulter_actus">
		 <BOUCLE_actu_controleur(ARTICLES){0,1}>
			<label for="rub_select">Rubrique</label>
			<select name="_id_rubrique" id="rub_select">
			   <option value="">Sélectionner une rubrique</option>
			   <BOUCLE_selection(RUBRIQUES){profondeur=1}{par titre}>
			   [<option VALUE="[(#ID_RUBRIQUE)]"[(#ENV{_id_rubrique}|=={[(#ID_RUBRIQUE)]}|?{' selected="selected"',''})]>(#TITRE) N°#ID_RUBRIQUE</option>]
			   </BOUCLE_selection>
			</select>
			<button type='submit' class='button small' type='submit' id="bouton_form"><:bouton_filtrer:></button>
		 </BOUCLE_actu_controleur>
		 </form>

	</div>

</BOUCLE_rubriques>
   
   
<INCLURE{fond=modeles/selection_articles,ajax,env, _id_rubrique, debut_page} />

<div>D'autres éléments dans la page</div>

le script qui récupère le choix du formulaire et agit sur la page principale

<script>

    // force l'envoi de _id_rubrique dans l'environnement 
    document.getElementById('bouton_form').addEventListener('click', function() {
        var rubriquechoisie = document.querySelectorAll("#rub_select option:checked");
        var _id_rubrique = rubriquechoisie[0].value;
        window.location.href = '[(#URL_RUBRIQUE)]&_id_rubrique=' + _id_rubrique;
        event.preventDefault();
    });

</script>

Et la page à inclure des articles paginés


Les articles de la rubrique N° [(#ENV{_id_rubrique,#ENV{id_rubrique}})] sont demandés
<B_page>
	#ANCRE_PAGINATION
	<ul>
	<BOUCLE_page(ARTICLES){id_parent = #ENV{_id_rubrique,#ENV{id_rubrique}}}{par id_rubrique, num titre}{pagination}>
	   <li><a href="#URL_ARTICLE">#TITRE</a> - [(#INFO_TITRE{rubrique, #ID_PARENT})] - [(#INFO_TITRE{rubrique, #ID_RUBRIQUE})]</li>
	</BOUCLE_page>
	</ul>
	[<nav role="navigation" class="pagination">(#PAGINATION{perso})</nav>]
</B_page>

J’ai simplifié pour que ce soit plus facilement compréhensible, le formulaire fonctionne sans le js vanilla mais, il faut dans ce cas envoyer le submit une seconde fois pour modifier l’url.

KMATHIEU · Février 26, 2024, 10:07

C’est parfait touti, ça fonctionne du tonnerre !!!

J’ai juste apporté une légère modif dans le inclure, car sans cela, au chargement initial de la page, ça n’affichait pas de liste des articles (sans filtre donc). Il me fallait choisir une valeur pour afficher la liste d’articles. Ça a l’air de bien fonctionner ainsi.

{id_parent == #ENV{_id_rubrique}}

au lieu de :

{id_parent = #ENV{_id_rubrique,#ENV{id_rubrique}}}

Un grand merci à vous 2, JLuc et touti, d’avoir pris le temps de lire mon sujet et de m’avoir aidé / aiguillé, c’est super sympa de votre part !

Il ne me reste plus qu’à tester en ajoutant mes autres options de filtre et voir si je parviens à cumuler les conditions en simultané .

JLuc · Février 26, 2024, 12:58

C’est à @touti que revient le mérite de cette soluce.

Au passage, là, js fait un appel en GET qui cour-circuite le form, du coup ya plus vraiment besoin d’un <form>…

À noter aussi que dans ton critère id_parent, ce n’est certainement pas == mais =

touti · Février 26, 2024, 3:15

Le code du js va juste mettre en variable l’option choisie dans le select, soit _id_rubrique et la renvoyer dans l’URL

window.location.href = '[(#URL_RUBRIQUE)]&_id_rubrique=' + _id_rubrique;

Avec ou sans ce js le form pourrait aussi bien se présenter comme une suite de liens, puisqu’il n’y a pas de traitement à exécuter. Ça ressemble un peu au fonctionnement du formulaire de recherche SPIP qui est construit différemment d’un formulaire classique.

KMATHIEU · Février 26, 2024, 9:29

En effet, bien vu. Erreur corrigée lorsque j’ai copié collé l’exemple de touti .