[Rails] toggle local en JS

J’ai souvent eu à mettre en place dans mes applis Rails des mécanismes de “remplacement” dynamique du contenu d’un <div>
(par exemple pour des fonctionnalités d’édition “in place”), et un link_to_remote avec la mise à jour Ajax du div concerné est souvent la meilleure solution.
Cependant, dans certains cas il est plus facile et surtout bien plus performant d’un point de vue utilisateur de générer à l’avance le contenu caché dans un span
à la suite du span affiché (j’utilise <span> car il n’impose pas de retour à la ligne, contrairement à <div&gt
On positionne ensuite un event javascript qui va permettre de faire le remplacement en local sans passer par un controller et une action.
Par exemple :

<span id=”span1″><a href=”javascript:toggle_div(’span1′,’span2′)” mce_href=”javascript:toggle_div(’span1′,’span2′)”>afficher la date</a></span>
<span id=”span2″ style=”display:none;”>nous sommes le <%=Time.now.strftime(”%d %m %Y”)%></span>

La méthode toggle_div javascript, à placer dans votre application.js par exemple :

function toggle_div(div1,div2) {
  var element1 = document.getElementById(div1);
  var element2 = document.getElementById(div2);
  if (element1.getStyle(’display’)!=’none’) {
  Effect.toggle(div1, ‘appear’, {queue:’front’, duration:0.2});
  Effect.toggle(div2, ‘appear’, {queue:’end’, duration:0.2});
  } else {
  Effect.toggle(div2, ‘appear’, {queue:’front’, duration:0.2});
  Effect.toggle(div1, ‘appear’, {queue:’end’, duration:0.2});
  }
}
l’important à remarquer ici est le “queue: xxx” qui permet de chainer les effets de disparition et d’apparition.
Sans ce param, le span caché apparait avant que le span à masquer n’ait disparu, provocant un rendu des plus disgratieux :/

Avec cette méthode, pas besoin de positionner de spinner de loading:
l’effet est instantané, et ça le client aime en général beaucoup ça

~ par Jerome Fillioux sur 26 février 2008.