Contrôleur - Vue avec ajaxReload

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

<html>
<head>
	<title>#NOM_SITE_SPIP</title>
	#INSERT_HEAD
</head>
<body>
	<h1>Journal Blabla</h1>
	<div class="container">
		<INCLURE{fond=inclure/liste_actus, env} />
		<INCLURE{fond=inclure/vue_actu, env, ajax=vue_actu} />
	</div>
</body>
</html>

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.

<div class="liste_actus">
	<h2>Derniers numéros</h2>
	<B_actu_controleur>
	<div class="liste_actus_inner">
	<BOUCLE_actu_controleur(ARTICLES){0,10}{!par date}>
		<a href="#URL_ARTICLE" class="liste_actus_item" data-id="#ID_ARTICLE">
			<h3>#TITRE</h3>
			[<div class="liste_actus_intro">
			(#INTRODUCTION|couper{25})
			</div>]
		</a>
	</BOUCLE_actu_controleur>
	</div>
	</B_actu_controleur>
</div>

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}

<BOUCLE_actu_vue(ARTICLES){id_article}>
<div class="vue_actu">
	[<div class="vue_actu_surtitre">(#SURTITRE)</div>]
	[<h1 class="vue_actu_titre">(#TITRE)</h1>]
	#LOGO_ARTICLE
	[<div class="vue_actu_texte">(#TEXTE)</div>]
</div>
</BOUCLE_actu_vue>

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

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

Le javascript

Voici le javascript, js/actu.js

// lancer le js quand le DOM est prêt
$(document).ready(function(){
 
	// detecter les clics sur les articles
	$('.liste_actus_item').on('click', function(event){
 
		// ne pas propager l'evenement javascript
		event.preventDefault();
 
		// on recupere l'id de l'article grace à l'attribut data-id
		var id_article_current = $(this).attr("data-id");
 
		// on ajoute une classe "active" sur le bloc en cours
		$('.liste_actus_item.active').removeClass('active');
		$(this).toggleClass('active');
 
		// on appelle le fonction ajaxReload
		// pour rafraichir le bloc "vue actu" avec comme argument id_article
		$(".debug").html("Appel de l'article: " + id_article_current);
		ajaxReload('vue_actu', {
			args:{id_article:id_article_current},
			callback:function(){
				$(".debug").html("Article " + id_article_current + " chargé !");
			},
		});
	});
});

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 21 décembre 2018

Discussion

3 discussions

  • 1

    Petite question. Comment pousser une valeur par défaut (sans clique) à la fois dans le contrôleur (classe active) et dans la vue Ajaxée ? Et ainsi avoir le dernière article en date au chargement de la page. Merci.

    • Hello,

      tu ne pourras pas « pousser » une valeur par défaut. C’est ta vue qui doit intégrer une valeur par défaut.

      Une solution serait de calculer la valeur par défaut de l’id_article au chargement initial de la vue (dans dans inclure/vue_actu.html donc)

      Par exemple, récupèrer le dernier article de ta rubrique Actus :

      <BOUCLE_derniere_actu(ARTICLES){id_rubrique=9}{!par date}{0,1}>#SET{id_last_actu,#ID_ARTICLE}</BOUCLE_derniere_acu>
       
      <BOUCLE_actu_vue(ARTICLES){id_article=#ENV{id_article,#GET{id_last_actu}}>

    Répondre à ce message

  • Mince, j’avais zappé la phrase explicative ou elle a été rajoutée après ? Oups, désolé.

    Répondre à ce message

  • 1

    La page démo n’est pas active a priori.

    • A priori, si la page demo est automatiquement active si vous déposez les fichiers du zip dans votre répertoire squelettes/

    Répondre à ce message

Ajouter un commentaire

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom