SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 92 visiteurs en ce moment

Accueil > Squelettes > Tutoriels pour squelettes > Contrôleur-Vue — AjaxReload > Contrôleur - Vue : exemple avancé avec Champs Extras

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

3 octobre 2018 – par Peetdu

1 vote

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 :

  1. <section>
  2.         <h1>Les actualités</h1>
  3.         <INCLURE{fond=inclure/actus_filtres, env}>
  4.         <INCLURE{fond=inclure/actus_liste, env, ajax=actus_liste}>
  5. </section>

Télécharger

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 :

  1. <fieldset>
  2.         <legend>Filtres</legend>
  3.         <form action="#SELF" method="post" id="consulter_actus">
  4.                 [(#SAISIE{selection, categorie, label=<:label_categorie:>,
  5.                                 option_intro='tous',
  6.                                 datas=[(#LISTER_CHOIX**{categorie})]})]
  7.                 [(#SAISIE{selection, annee, label=<:label_annees:>,
  8.                                 option_intro=2018,
  9.                                 datas=[(#LISTER_CHOIX**{annee})]})]
  10.                   <button type='submit' class='btn' type='submit'>               <:bouton_filtrer:></button>
  11.                 </form>
  12.         </div>
  13. </fieldset>
  14.  
  15. <script type="text/javascript">
  16. (function($){
  17.         $(document).ready(function(){
  18.                 $('#consulter_actus').submit(function(e){
  19.                         // désactiver le fonctionnement par défaut du formulaire. Le JS ici prend la main.
  20.                         e.preventDefault();
  21.                         // récupère la ou les valeurs sélectionnée(s) par l'utilisateur
  22.                         var values = {};
  23.                         var $selection = $('select option:selected');
  24.                         $selection.each(function() {
  25.                                 var $name_select = $(this).parent().prop('name');
  26.                                 values[$name_select] = $(this).val();
  27.                         });
  28.                         // hop, on envoi le tout à la VUE
  29.                         ajaxReload('actus_liste', {
  30.                                 args:values
  31.                         });
  32.                 })
  33.         });
  34. })(jQuery);
  35. </script>

Télécharger

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 :

  1. <fieldset>
  2.         <legend>Liste des actus</legend>
  3.         <BOUCLE_listing_actus(BREVES){!par date}{categorie?}{annees?}>
  4.                 <a href="#URL_BREVES">#TITRE</a>
  5.                 <div>#LISTER_VALEURS{annee} / #LISTER_VALEURS{categorie}</div>
  6.                 <div>[(#TEXTE|couper{100})]</div>
  7.         </BOUCLE_listing_actus>
  8. </fieldset>

Télécharger

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

Dernière modification de cette page le 3 octobre 2018

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Menu animé déroulant

    16 août 2015 – 60 commentaires

    Barre de menu dynamique multi niveaux - adaptation aisée (?) des couleurs et dimensions - convient aussi aux petits écrans (mobiles).

  • Réservations multiples

    4 juillet – commentaires

    Permettre aux utilisateurs d’effectuer de réservations multiples (réserver pour plusieurs personnes à la fois ou réserver un événement plusieurs fois) Dépendances Saisies Réservation d’événements Introduction Il y a deux manières de multiplier les (...)

  • PHANTOM (HTML5UP)

    18 juillet – 32 commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • SPIPer Ipsum, l’évangile au quotidien

    28 décembre 2009 – 89 commentaires

    Ce plugin permet d’afficher les différentes lectures de l’évangile du jour et le saint du jour selon le calendrier fixé par l’Eglise catholique. Ce service est proposé par le site de L’Evangile au Quotidien dans plusieurs langues. Description Le (...)

  • ciparam : plugin « Configurateur de squelettes »

    29 novembre 2010 – 15 commentaires

    Ce plugin offre un mécanisme de sélection de forme de rubrique ou d’article, un mécanisme de variantes de chartes graphiques, la possibilité de choisir l’ordre de tri des articles dans les rubriques, un mécanisme de paramétrage de la page d’accueil, (...)