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>
	<div class="liste_actus_inner">
	<BOUCLE_actu(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>
	</div>
	</B_actu>
</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(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>

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

Discussion

2 discussions

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

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