Inclusions et paginations AJAX

Inclusions ajax

Les inclusions qui possèdent le critère {ajax} permettent de recharger dans la page seulement la partie incluse. La plupart du temps, il faudra aussi inclure le critère {env} dès lors qu’il y a une pagination dans l’inclusion.

<INCLURE{fond=inclure/fichier}{env}{ajax} />

Dans l’inclusion, le rechargement ajax peut se faire au moyen d’un lien (voir Liens AJAX), d’un #BOUTON_ACTION (voir https://spip.net/4583) ou d’un formulaire ajax (voir https://spip.net/3800).

Par défaut, le rechargement ajax provoque un scroll en haut du bloc ajax. On peut toutefois modifier ce comportement :

  • définir la destination de ce scroll au moyen d’une ancre dédiée à l’intérieur du bloc rechargé :
    <a name="ajax_ancre" href="#truc"></a>
  • désactiver le scroll en utilisant une classe "noscroll" sur les liens, les #BOUTON_ACTION ou les submit des formulaires ajax qui provoquent ce rechargement.

Pour un formulaire, on peut activer ajax pour les étapes de saisies et de vérifications de la conformité des données saisies, mais le désactiver pour l’affichage qui suit la validation : voir « Traitement sans AJAX ».

Inclusions ajax avec pagination

Lorsque l’on couple ce critère d’inclusion avec la balise #PAGINATION, les liens de pagination deviennent alors automatiquement AJAX. Plus précisément, tous les liens du squelette inclus contenus dans une classe CSS pagination.

<p class="pagination">#PAGINATION</p>

Exemple

Lister les derniers articles. Cette inclusion liste les derniers articles par groupe de 5 et affiche un bloc de pagination.

<INCLURE{fond=modeles/liste_derniers_articles}{env}{ajax} />

Fichier modeles/liste_derniers_articles.html :

<B_art>
  #ANCRE_PAGINATION
  <ul>
    <BOUCLE_art(ARTICLES){!par date}{pagination 5}>
      <li><a href="#URL_ARTICLE">#TITRE</a></li>
    </BOUCLE_art>
  </ul>
  <p class="pagination">#PAGINATION</p>
</B_art>

Résultat : Une pagination ajax, de 5 en 5...

<a id="pagination_art" name="pagination_art"/>
<ul>
	<li><a href="Recursivite,246" title="art246">Récursivité</a></li>
	<li><a href="Parametre" title="art245">Paramètre</a></li>
	...
</ul>
<p class="pagination">
	<strong class="on">0</strong>
	<span class="separateur">|</span>
	<a rel="nofollow" class="lien_pagination noajax" href="Paginations-AJAX?debut_art=5#pagination_art">5</a>
	<span class="separateur">|</span>
	<a rel="nofollow" class="lien_pagination noajax" href="Paginations-AJAX?debut_art=10#pagination_art">10</a>
	<span class="separateur">|</span>
	...
	<a rel="nofollow" class="lien_pagination noajax" href="Paginations-AJAX?debut_art=205#pagination_art">...</a>
</p>

Auteur Gilles Vincent, Matthieu Marcillaud Publié le : Mis à jour : 28/05/23

Traductions : English, français, Nederlands