Contrôleur - Vue : exemple avancé avec Champs Extras

Dans la suite de Contrôleur - Vue avec ajaxReload, vous trouverez ici un nouvel exemple avec le contrôleur composé cette fois-ci de deux champs extras.

Le principe

Voici une représentation de ce que l’on veut obtenir

Cette page est décomposée comme suit

  • Un titre
  • un bloc Contrôleur composé de deux type de filtre (catégorie actu + année de publication), sous forme de formulaire.
  • un bloc Vue contenant le listing des actus

Un clic sur le bouton Filtrer du bloc Contrôleur va recharger en ajax le Bloc Vue en prenant en compte les nouvelles valeurs choisies par l’internaute.

Explications

Créer le fichier squelettes/actualites.html avec le contenu suivant :

…
<section>
	<h1>Les actualités</h1>
	<INCLURE{fond=inclure/actus_filtres, env}>
	<INCLURE{fond=inclure/actus_liste, env, ajax=actus_liste}>
</section>
…

Notes
— Le HTML est très simple car composé de deux INCLUREs.

— Le point vraiment remarquable ici est la présence de l’attribut ajax=actus_liste dans le deuxième INCLURE. Les explications à ce propos sont dans l’article https://www.spip.net/fr_article3753.html, paragraphe «Rechargement télécommandé de blocs ajax»

Le fichier actus_filtres.html

Note préalable
Les filtres ici sont deux champs extras associés aux brèves et constitués d’une liste de valeurs.

Créer le fichier squelettes/inclure/actus_filtres.html avec le code suivant :

<fieldset>
	<legend>Filtres</legend>
	<form action="#SELF" method="post" id="consulter_actus">
		[(#SAISIE{selection, categorie, label=<:label_categorie:>,
				option_intro='tous',
				datas=[(#LISTER_CHOIX**{categorie})]})]
		[(#SAISIE{selection, annee, label=<:label_annees:>,
				option_intro=2018,
				datas=[(#LISTER_CHOIX**{annee})]})]
		  <button type='submit' class='btn' type='submit'>		 <:bouton_filtrer:></button>
		</form>
	</div>
</fieldset>
 
<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$('#consulter_actus').submit(function(e){
			// désactiver le fonctionnement par défaut du formulaire. Le JS ici prend la main.
			e.preventDefault();
			// récupère la ou les valeurs sélectionnée(s) par l'utilisateur
			var values = {};
			var $selection = $('select option:selected');
			$selection.each(function() {
				var $name_select = $(this).parent().prop('name');
				values[$name_select] = $(this).val();
			});
			// hop, on envoi le tout à la VUE
			ajaxReload('actus_liste', {
				args:values
			});
		})
	});
})(jQuery);
</script>

Pour le détail sur les paramètres de ajaxReload, voir aussi https://www.spip.net/fr_article5427.html, paragraphe “JavaScript”

Le fichier inclure/actus_liste.html

Créer le fichier squelettes/inclure/actus_liste.html avec le code suivant :

…
<fieldset>
	<legend>Liste des actus</legend>
	<BOUCLE_listing_actus(BREVES){!par date}{categorie?}{annees?}>
		<a href="#URL_BREVES">#TITRE</a>
		<div>#LISTER_VALEURS{annee} / #LISTER_VALEURS{categorie}</div>
		<div>[(#TEXTE|couper{100})]</div>
	</BOUCLE_listing_actus>
</fieldset>
…

Voir à ce propos de ce code l’article sur le critère conditionnel

Discussion

One discussion

  • Bonjour,

    Merci beaucoup pour cette contribution ! Je suis néanmoins confronté à 3 problèmes détaillés ci-après. Pour le contexte, je précise que j’utilise des filtre Champs Extras associés aux articles.

    1er problème
    Lorsque j’intègre le code tel quel dans mon site en développement (pas en ligne donc), en adaptant bien sur les appels de filtre pour que cela corresponde à mes données, j’obtiens le rapport d’erreur suivant :

    Numéro Message squelette boucle Ligne
    1 Champ LISTER_CHOIX hors boucle squelettes/inclure/actus_filtres.html / 8
    2 Champ LISTER_CHOIX hors boucle squelettes/inclure/actus_filtres.html / 4

    J’ai solutionné en tentant un peu au hasard en ajoutant une boucle comme indiqué ci-après dans le fichier « actus_filtres.html » ( le « 0,1 » pour limiter le « fieldset » à 1 sinon j’ai l’impression d’en avoir autant que j’ai d’articles) :

    <fieldset>
    	<legend>Filtres</legend>
    	<form action="#SELF" method="post" id="consulter_actus">
    	<BOUCLE_actu_controleur(ARTICLES){0,1}>
    		[(#SAISIE{selection, type_contenu, label=<:label_categorie:>,
    			option_intro='TOUT',
    			datas=[(#LISTER_CHOIX**{type_contenu})]})]
    		[(#SAISIE{selection, support, label=<:label_support:>,
    			option_intro='TOUT',
    			datas=[(#LISTER_CHOIX**{support})]})]
    	 <button type='submit' class='button small' type='submit'><:bouton_filtrer:></button>
    	</BOUCLE_actu_controleur>
    	</form>
    </fieldset>

    2ème problème - Le plus embêtant
    Le 2ème filtre de sélection ne fonctionne pas et je ne comprends pas pourquoi...
    A toute fin utile, je mets le contenu de mon équivalent au fichiers « actualites.html » et de mon fichier « actus_liste.html » :

    <BOUCLE_principale(RUBRIQUES) {id_rubrique} {tout}>
    …
    <section>
    	<h1>Les actualités</h1>
    	<INCLURE{fond=inclure/actus_filtres, env}>
    	<INCLURE{fond=inclure/actus_liste, env, ajax=actus_liste}>
    </section>
    …
    </BOUCLE_principale>
    <fieldset>
    	<legend>Liste des actus</legend>
    	<BOUCLE_listing_actus(ARTICLES){type_contenu?}{support?}>
    		<a href="#URL_ARTICLE">#TITRE</a>
    		<div>[(#LISTER_VALEURS{date_1}|annee)] / [(#LISTER_VALEURS{type_contenu})] / [(#LISTER_VALEURS{support})]</div>
    		<div>[(#TEXTE|couper{100})]</div>
    	</BOUCLE_listing_actus>
    </fieldset>

    3ème problème
    Je voudrais intégrer un troisième filtre sur une champs extra « date_1 », mais celui-ci renvoie une sélection vide... Sachant qu’in fine, je voudrais n’afficher que l’année de ce champs date dans le filtre.
    Voici le code que j’ai ajouté dans le fichier « actus_filtres.html » mais qui ne renvoie rien :

    [(#SAISIE{selection, date_1, label=<:label_support:>,
    	option_intro='TOUT',
    	datas=[(#LISTER_CHOIX**{date_1})]})]

    Et dans le fichier « actus_liste.html » :

    <fieldset>
    	<legend>Liste des actus</legend>
    	<BOUCLE_listing_actus(ARTICLES){type_contenu?}{support?}{date_1?}>
    		<a href="#URL_ARTICLE">#TITRE</a>
    		<div>[(#LISTER_VALEURS{date_1}|annee)] / [(#LISTER_VALEURS{type_contenu})] / [(#LISTER_VALEURS{support})]</div>
    		<div>[(#TEXTE|couper{100})]</div>
    	</BOUCLE_listing_actus>
    </fieldset>

    Voilà, si une âme charitable a quelques conseils à me donner, je suis preneur.

    Merci par avance.

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom