2009-03-23 17 views
2

Nous développons actuellement une boutique web B2B basée sur Java EE 5, JSF, Facelets et RichFaces. La technologie a vraiment très bien fonctionné jusqu'à présent, mais maintenant je suis confronté à un petit problème que je n'arrive pas à résoudre:RichFaces: Affichage d'une notification "popup" lorsque l'opération AJAX a réussi

Les produits sont listés dans des tableaux, où chaque article peut être ajouté au panier par en cliquant sur une petite icône à la fin de la rangée. L'ajout du produit se fait via AJAX pour éviter le rechargement complet de la page. Cela fonctionne sans aucun problème en utilisant un h:dataTable et un a4j:commandLink pour appeler une méthode d'action qui ajoute le produit sélectionné au panier. Même la restitution du total du panier toujours visible dans la barre latérale fonctionne correctement.

En raison de la nature d'AJAX, il n'y a pas d'indication visible (sauf le changement de côté sur le côté) que l'opération a réussi ou a été terminée au moins. Maintenant, je veux ajouter une petite boîte "popup", qui est visible à côté de l'icône d'ajout lorsque l'opération AJAX est terminée, indiquant que l'élément a été ajouté au panier. Cette boîte devrait automatiquement disparaître après quelques secondes.

C'est ce que je pense devraient travailler (les classes CSS-popup_message et popup_content faire flotter boîte au-dessus de la position où son balisage est):

<h:dataTable ....> 
    ... 
    <h:column> 
     <a4j:commandLink action="..."> 
      <rich:effect event="oncomplete" targetId="addedMessage" 
       type="Appear" /> 
      <rich:effect event="oncomplete" targetId="addedMessage" 
       type="Appear" params="{delay:3.0, duration:1.0}" /> 
     </a4j:commandLink> 

     <a4j:outputPanel id="addedMessage" styleClass="popup_message" 
      style="display: none"> 
      <a4j:outputPanel layout="block" styleClass="popup_content"> 
       <h:outputText value="Item added!" /> 
      </a4j:outputPanel> 
     </a4j:outputPanel> 
    </h:column> 
</h:dataTable> 

Malheureusement, il ne montre pas la boîte du tout . Si je change le event de l'effet "Apparaître" à onclick cela fonctionne presque comme prévu. Il est immédiatement affiché lorsque l'icône est cliquée et disparaît 3 secondes après la fin de l'opération AJAX. Mais je ne veux pas qu'il apparaisse immédiatement après le clic, car il serait erroné d'indiquer que l'article a été ajouté au panier, alors qu'en fait l'opération n'a même pas encore commencé. Cela devient encore plus important lorsque je veux indiquer une erreur ou que je veux inclure des informations spécifiques à un élément dans la boîte, qui n'est disponible qu'après l'ajout de l'élément.

Donc, des idées comment faire cela? Et pourquoi ajouter deux effets pour le même événement ne fonctionne pas?

(je l'ai déjà regardé the effect-example from the RichFaces live demo. Les exemples ne fonctionnent presque les mêmes, execept qu'ils ajoutent le second effet avec l'attribut indiquant explicitement for. Mais même cela ne fonctionne pas pour moi.)

Mise à jour: J'ai essayé d'utiliser le rich:toolTip à cette fin, ce qui semble assez flexible. Mais peu importe ce que je fais, je ne peux rien attacher à l'événement "oncomplete" (j'ai aussi essayé "complete") du a4j:commandLink, sauf un effet ... semble qu'il y a un bug/comportement non documenté à ce sujet un événement. Je viens de trouver ce rapport de bug: RF-3427

Répondre

-1

Votre identifiant cible en dehors des paramètres. Qu'est-ce que vous voulez faire est:

<rich:effect event="oncomplete" type="Appear" params="targetId:'addedMessage',delay:3.0, duration:1.0" /> 

Essayez cela, et je pense que cela va fonctionner.

+0

Je ne sais pas si je l'ai essayé déjà, mais nous verrons. Si cela fonctionne, les docs de RichFaces ont besoin d'un travail sérieux ... –

+0

Essayé mais cela ne fonctionne pas, mais merci quand même. J'ai regardé le html/javascript généré, et comme il semble, un seul effet riche peut être par événement (le dernier effet remplace tous les effets précédemment définis pour cet événement). Maintenant, je voudrais savoir, comment l'exemple de la démo en direct fonctionne ... –