Ajax pour VisualForce via l'attribut reRender

Vous connaissez certainement le principe de l'ajax (Asynchronous JavaScript + XML ), cette technologie permet d’interroger des scripts sur le serveur Web de manière asynchrone. Ceci permet d'éviter de recharger la page pour rafraîchir uniquement les parties que l'on a besoin.

Nous gagnons en ergonomie et en confort d'utilisation, mais aussi cela permet de réduire les temps de traitement.

Et sans Ajax?

Chaque fois qu'une action est appelée, toute la page est rafraîchie. 

Par exemple, si on souhaite filtrer la liste des villes en fonction de la selection faite sur la liste des pays, nous sommes obligés de recharger toute la page. Nous devons également passer en paramètre la sélection du pays pour l'initialiser au retour de la requête.

Avec Ajax, nous passons le pays sélectionné en paramètre, puis le serveur nous retourne uniquement la liste des villes correspondantes, du coté du javascript, nous avons juste à traiter la réponse pour modifier le contenu de la liste des villes.

L'attribut reRender ? 

Dans une page visualForce, nous pouvons utiliser l'ajax grâce à l'attribut reRender. Cet attribut s'applique aux composants en interaction avec l'utilisateur par exemple :  

• <apex:commandLink>
• <apex:actionSupport>
• <apex:commandButton>
• <apex:actionFunction>
• ...

Comment l'utiliser ?

Voici un exemple de code qui montre l'attribut Rerender en action.

<apex:page >

<apex:form >

   <apex:pageBlock >             

         

          <apex:commandButton value="Cliquer ici!" reRender="time" status="refreshstatus"></apex:commandButton>

                 

          <apex:outputpanel id="time">

              <apex:outputtext value="{!NOW()}"/>

          </apex:outputpanel>

         

          <apex:actionStatus startstyle="color:red;" id="refreshstatus" startText="Mise à jour de la date...."></apex:actionStatus>  

   </apex:pageBlock>

</apex:form> 

</apex:page>

Voici le résultat :

Et quand on clique sur le bouton, la date est mise à jour sans recharger la page.

En fait, c'est uniquement l'outputpanel qui a pour id "date" qui va être rafraîchi. Vous pouvez voir que l'attribut reRender du commandButton est égal à cet id.

Sinon, vous avez surement remarqué le message en rouge sur la capture d'écran, c'est le message qui est affiché pendant le chargement : une sorte d'Ajax Loader. Pour cela, il faut utiliser le composant <apex:actionStatus> et renseigner l'attribut status du bouton avec son id.

Un autre avantage du reRender est la possibilité de recharger uniquement notre page sans recharger la sidebar ni le menu.

Le multi-reRender ?
Nous pouvons également renseigner plusieurs ids dans l'attribut reRender. Cela signifie que tous les composants dont l'id est renseigné vont être rafraîchis.

source : Rerender and actionsupport