Blocs ajax et ajaxReload

Les pages précédentes ont présenté comment l’appel d’un bloc en ajax permet de recharger ce bloc lors de la validation d’un formulaire ou d’un lien ajax contenu par ce bloc. Mais lorsqu’on veut forcer le rechargement d’un autre bloc, alors ce bloc doit être lui-même inclu avec ajax, et il faut ensuite utiliser la fonction javascript ajaxReload.

– Déclarer cet autre bloc ajax dont on veut forcer le rechargement : c’est le rôle de l’argument ajax=autrebloc lors de son inclusion :
<INCLURE{fond=inclure/monautrebloc,ajax=autrebloc}>

– Appeler ajaxReload en javascript, quelque part et au bon moment, avec l’argument "autrebloc".

Appel d’ajaxReload

L’appel de ajaxReload peut se faire en plusieurs occasions :

1) En incluant le javascript dans le HTML du formulaire ou de la noisette qui l’appelle.

Pour la config du plugin reservation_evenement, on trouve :

$(function() {
  $("body").on('submit', '.formulaire_configurer_reservation_evenement form', function(event) {
    ajaxReload('configurer_re_menu'); 
    ajaxReload('navigation'); 
  });
 });

2) En incluant le javascript dans le message de reponse_ok d’un formulaire.

C’est ce qui est fait par exemple dans le plugin-dist medias :

if ($res['message_ok']) {
    $res['message_ok'] .= '<script type="text/javascript">if (window.jQuery) ajaxReload("document_infos");</script>';
}

3) En incluant le javascript dans le 6eme argument callback d’un appel à la balise #BOUTON_ACTION

Exemple dans le plugin roles_document :

[(#BOUTON_ACTION{
  <:medias:bouton_enlever_document:>,
  [(#URL_ACTION_AUTEUR{
      dissocier_document_role,
      #ID_OBJET-#OBJET-#ID_DOCUMENT-[(#ENV{role})]--safe,
      #SELF})],
  ajax,
  '',
  '',
  [(function(){
      jQuery("#doc(#ID_DOCUMENT)#ENV{uniqueid}").animateRemove();
      $(".liste_items.documents").ajaxReload();
      return true;
    })()
  ]
})]

Arguments

ajaxReload reçoit ses arguments sous la forme d’un tableau dont les clés sont :
– args : un tableau des variables constituant le contexte d’évaluation du squelette. Et parmi elles, l’index var_ajax_ancre indique l’ancre destination du scroll après rechargement.
– history : true ou false, selon que le rechargement doit apparaître ou non dans l’historique du navigateur.

Exemple (dans le plugin agenda) :

$("#liste_des_evenements").ajaxReload({args:{var_ajax_ancre:date_debut,debut_liste_evt:""},history:true});

Exemple : dans un lien pour ensuite raffraîchir une autre zone

Dans le plugin albumauto, qui permet un fonctionnement des documents similaire à l’ancien portfolio SPIP, il faut raffraîchir 2 zones lorsqu’on déplace des documents vers l’album et réciproquement. Le commit 2c91ab00e3f7c446df6c99918c2c2595777c5dcc ajoute donc le rafraîchissement de la zone cible du déplacement :

[(#ENV{objet}|=={album}|oui)
<a href="#URL_ACTION_AUTEUR{albums_changer_mode_document,#ENV{id_document}-#ENV{objet}-#ENV{id_objet}-#ENV{objet_precedent}-#ENV{id_objet_precedent},#SELF}" class="btn btn_mini ajax noscroll" onclick="$.ajax({
    url: this.href,
  }).done(function(){
    ajaxReload('albums_liste');
  });"><:albumsauto:upload_info_mode_document:></a>
]
[(#ENV{objet}|=={album}|non)
<a href="#URL_ACTION_AUTEUR{albums_changer_mode_document,#ENV{id_document}-#ENV{objet}-#ENV{id_objet}-#ENV{objet_precedent}-#ENV{id_objet_precedent},#SELF}" class="btn btn_mini ajax noscroll" onclick="$.ajax({
    url: this.href,
  }).done(function(){
    ajaxReload('documents');
  });"><:albumsauto:upload_info_mode_image:></a>
]

Voir aussi

– Documentation de #BOUTON_ACTION
– https://contrib.spip.net/Astuces-Actions-et-Boutons