{ajax} per les inclusions

A la pràctica

El principi consisteix en fer que AJAX sigui accessible, amagant-ne la complexitat:

Tinc un tros de pàgina que conté enllaços cap a aquesta mateixa pàgina i que només provoquen canvis en aquest tros de pàgina:

1. poso aquest tros de pàgina a dins d’un esquelet diferent
2. marco els enllaços afectats amb la class ajax : <a href='monlien' class='ajax'>...</a>
3. incloc el meu esquelet a una pàgina principal amb <INCLURE{fond=monskel}{ajax}{env}> o #INCLURE{fond=monskel}{ajax}{env}

I això és tot!

Algunes petites precisions malgrat tot:

• comproveu sempre primer el vostre esquelet sense l’argument {ajax}
• {ajax} hauria d’anar sempre acompanyat de {env} per tal d’evitar qualsevol risc d’injecció d’ULRL’s a la memòria cau d’SPIP.
• per defecte, els enllaços a continguts a dins d’una classe pagination també es mostren en AJAX.
• és possible determinar altres enllaços especificant el selector jquery var ajaxbloc_selecteur = 'a.uneautreclasse';

Amb tots els detalls

Sintaxi de crida:

• <INCLURE{fond=mon_fond}{ajax}{env}>
• [(#INCLURE{fond=mon_fond}{ajax}{env})]

Aquesta crida inclou l’esquelet mon_fond aplicant AJAX automàticament a tots els enllaços definits per la variable js ajaxbloc_selecteur.

Un bloc <div ..></div> s’insereix automàticament a l’entorn del contingut del esquelet inclusiu, pel mecanisme de gestió de l’AJAX.

Per defecte aquest defineix les ’.pagination a,a.ajax’. Dit d’una altra manera, fa falta tenir al codi font dels esquelets:

• o bé la gestió estàndard de la paginació per SPIP. A condició que l’etiqueta #PAGINATION estigui inclosa en un element de classe pagination. Ex : <p class="pagination">#PAGINATION</p>
• o bé una classe ajax als enllaços (<a class="ajax" href=...>)

Un clic en un enllaç AJAX reactiva automàticament només el càlcul de l’esquelet inclusiu, restaurant el seu #ENV, i afegint-hi els paràmetres passats per l’Url de l’enllaç.

El bloc recarregat passa a tenir una opacitat del 50 % i agafa la class loading durant la càrrega cosa que permet modificar-ne l’estil segons les nostres conveniències.

És interessant adonar-nos que:

• els enllaços ajax es posen a la memòria cau del navegador quan es cliquen un cop. El bloc, per tant, només es carrega un cop, encara que l’internauta torni a clicar diverses vegades sobre el mateix ’enllaç
• alguns enllaços es poden recarregar prèviament si els hi afegim la classe preload

Alguns exemples

[(#INCLURE{fond=inc-liens}{ajax}{env})]

<BOUCLE_liste(AUTEURS) >
        <a class="ajax" href="[(#SELF|parametre_url{id_auteur,#ID_AUTEUR})]">
            #NOM #ID_AUTEUR
        </a>
</BOUCLE_liste>
[(#ENV{id_auteur}|oui)
    #ENV{id_auteur}
]

<h4> Utilització de la paginació</h4>
Per la paginació, prenem un exemple tret de <code>squelettes-dist/sommaire.html</code>.

Posem a dins d'un esquelet <code>inc-recents.html</code> el bucle que llista els articles recents:

<:derniers_articles:>

• [(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE|image_reduire150,100)]

  #TITRE

  title="(#DATE>(#DATE[, <:par_auteur:> (#LESAUTEURS)] [

  (#INTRODUCTION)

  ]

[

(#PAGINATION)

]