SPIP-Contrib

SPIP-Contrib

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

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

Accueil > Squelettes > Tutoriels pour squelettes > Contrôleur-Vue — AjaxReload > Contrôleur - Vue avec ajaxReload

Contrôleur - Vue avec ajaxReload

27 septembre 2018 – par cy_altern, erational, Peetdu – commentaires

7 votes

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Le besoin :
Au sein d’une page web, avoir un bloc de sélection qui charge dynamiquement un contenu dans un autre bloc de la même page grâce à Ajax.

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é d’une liste d’items
  • un bloc Vue qui va recevoir le contenu sélectionné

La structure de la page HTML

Dans le répertoire squelettes/, on crée une page actualites.html

  1. <html>
  2. <head>
  3.         <title>#NOM_SITE_SPIP</title>
  4.         #INSERT_HEAD
  5. </head>
  6. <body>
  7.         <h1>Journal Blabla</h1>
  8.         <div class="container">
  9.                 <INCLURE{fond=inclure/liste_actus, env} />
  10.                 <INCLURE{fond=inclure/vue_actu, env, ajax=vue_actu} />
  11.         </div>
  12. </body>
  13. </html>

Télécharger

Explication :

  • Le HTML reprend la découpe en blocs :
    • Chaque bloc correspond à un INCLURE.
    • Le point vraiment remarquable ici est la présence de l’attribut ajax=vue_actu dans le deuxième INCLURE. Explications dans la documentation officielle https://www.spip.net/fr_article3753.html
  • Dans le partie <head> du HTML, on ajoute la balise #INSERT_HEAD pour que SPIP charge les scripts nécessaires à l’Ajax

Le bloc Contrôleur : inclure/liste_actus.html

Il s’agit juste d’une simple boucle SPIP ARTICLES.

  1. <div class="liste_actus">
  2.         <h2>Derniers numéros</h2>
  3.  
  4.         <B_actu>
  5.         <div class="liste_actus_inner">
  6.         <BOUCLE_actu(ARTICLES){0,10}{!par date}>
  7.                 <a href="#URL_ARTICLE" class="liste_actus_item" data-id="#ID_ARTICLE">
  8.                                 <h3>#TITRE</h3>
  9.                                 [<div class="liste_actus_intro">
  10.                                 (#INTRODUCTION|couper{25})
  11.                                 </div>]
  12.                 </a>
  13.         </BOUCLE_actu>
  14.         </div>
  15.         </B_actu>
  16. </div>

Télécharger

Dans cet exemple, nous listons les 10 derniers articles.

Pour nous faciliter la programmation javascript, sur le lien vers des articles, on ajoute un attribut data-id qui contient l’id_article

Le bloc Vue : inclure/vue_actu.html

Le bloc vue doit afficher un seul article.
Le critère de la boucle ARTICLES à utiliser est donc {id_article}

  1. <BOUCLE_actu(ARTICLES){id_article}>
  2. <div class="vue_actu">
  3.         [<div class="vue_actu_surtitre">(#SURTITRE)</div>]
  4.         [<h1 class="vue_actu_titre">(#TITRE)</h1>]
  5.         #LOGO_ARTICLE
  6.         [<div class="vue_actu_texte">(#TEXTE)</div>]
  7. </div>
  8. </BOUCLE_actu>

Télécharger

Ajouter l’habillage et l’interactivité

La structure HTML est en place !
Nous pouvons l’appeler par l’adresse
http://monsite.org/spip.php?page=actualites

Nous allons maintenant ajouter une feuille de style pour habiller la page et un javascript pour gérer l’appel des blocs.

Complétons le <head> de la page squelettes/actualites.html

  1. <head>
  2.         <title>#NOM_SITE_SPIP</title>
  3.         [<link href="(#CHEMIN{css/actu.css})" rel="stylesheet" type="text/css">]
  4.         #INSERT_HEAD
  5.         <script src="#CHEMIN{js/actu.js}" type='text/javascript'></script>
  6. </head>>

Télécharger

Le javascript

Voici le javascript, js/actu.js

  1. // lancer le js quand le DOM est prêt
  2. $(document).ready(function(){
  3.  
  4.         // detecter les clics sur les articles
  5.         $('.liste_actus_item').on('click', function(event){
  6.  
  7.                 // ne pas propager l'evenement javascript
  8.                 event.preventDefault();
  9.  
  10.                 // on recupere l'id de l'article grace à l'attribut data-id
  11.                 var id_article_current = $(this).attr("data-id");
  12.  
  13.                 // on ajoute une classe "active" sur le bloc en cours
  14.                 $('.liste_actus_item.active').removeClass('active');
  15.                 $(this).toggleClass('active');
  16.  
  17.                 // on appelle le fonction ajaxReload
  18.                 // pour rafraichir le bloc "vue actu" avec comme argument id_article
  19.                 $(".debug").html("Appel de l'article: " + id_article_current);
  20.                 ajaxReload('vue_actu', {
  21.                         args:{id_article:id_article_current},
  22.                         callback:function(){
  23.                                 $(".debug").html("Article " + id_article_current + " chargé !");
  24.                         },
  25.                 });
  26.         });
  27. });

Télécharger

Tester chez soi

Voici un zip avec l’exemple complet.

Ajaxload par l’exemple

Placer ses fichiers dans le répertoire squelettes/ de votre site SPIP et appelez la page démo :
http://monsite.org/spip.php?page=actualites

Voir aussi

Rechargement télécommandé de blocs ajax

Dernière modification de cette page le 1er octobre 2018

Retour en haut de la page

Vos commentaires

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

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, (...)