sablier ou barre de progression

Bonjour,

J’ai une action actionCreerToto() qui se fini par un “render” et le traitement est assez long, je voudrais afficher un sablier ou une barre de progression afin de faire patienter l’utilisateur. Comment fait-on ça avec Yii ?

Salut !

Il n’y a pas de méthode propre à Yii pour faire ce genre de chose (enfin à ma connaissance).

La méthode que j’utilise, c’est d’afficher une DIV en pleine page avec un gif animé de chargement au milieu. La subtilité, c’est d’afficher cette DIV sur le bouton qui a déclenché l’action (le submit d’un formulaire par exemple). Lors du chargement de la page (une fois le render de ton action), la nouvelle page s’affichera et remplacera cette DIV.

Je n’ai pas les détails précis, mais basiquement il faut créer une DIV dans ta page (juste avant le </BODY> par exemple):




<div id="loading">

  <img id="loading-image" src="/images/ajax-loader.gif" alt="Chargement..." />

</div>



avec le code CSS pour le mettre en pleine page :




#loading {

  position: fixed;

  width: 100%;

  height: 100%;

  top: 0px;

  left: 0px;  

  display: none;

  opacity: 0.7;

  background-color: #fff;

  z-index: 99;

  text-align: center;

}


#loading-image {

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -24px; /* la moitié de la hauteur de l'image */

  margin-left: -24px; /* la moitié de la largeur de l'image */

  z-index: 100;

}



et ajouter un appel à une fonction jQuery sur l’évènement onclick de ton bouton :




'htmlOptions' => array(

    ...

    'onclick' => '$("div#loading").show();',

);



En passant, ce site permet de créer des GIF dans le style de ton site : http://www.ajaxload.info/

Pour ce faire, j’implémenterai une requête ajax pour suivre le niveau de progression. Et une fois que la tâche est complétée ou qu’il y a eu une erreur, soit faire un reload/redirection de la page vers l’action qui convient, ou mettre à jour une partie de la page avec l’action qui convient.

Cela implique l’utilisation d’un window.setTimeout en JavaScript.

Un billet de wiki fait une proposition qui me semble un peu lourd, mais il a le mérite d’exister:

http://www.yiiframework.com/wiki/538/how-to-make-a-dynamic-progress-bar-to-show-the-percentage-or-status

OK, je me disais qu’un framework comme Yii avait prévu un truc plus simple mais ta proposition RadicalDingos me convient parfaitement. J’ai pas besoin d’Ajax, pour cette fois.

@RadicalDingos

Méthode asses simple, génial!