RichFaces: Displaying a notification "popup" when AJAX operation succeeded

Question

We are currently developing a B2B web shop based on Java EE 5, JSF, Facelets and RichFaces. The technology has really worked very well so far, but now I am facing a small problem I just can't figure out how to solve:

Products are listed as tables, where every item can be added to the shopping basket by clicking on a small icon at the end of the row. Adding the product is done via AJAX to avoid the full reload of the page. This works without any problems just by using a h:dataTable and an a4j:commandLink to call an action-method which adds the selected product to the basket. Even the re-rendering of the basket total always visible in the side-bar is working properly.

Due to the nature of AJAX, there is no visible indication (except the changing total at the side) that the operation was successful or has been completed at least. Now I want to add a little "popup" box, which is made visible next to the add-icon when the AJAX-operation is completed, stating that the item was added to the basket. This box should automatically go away after a few seconds.

This is what I think should work (the popup_message and popup_content css-classes make the box float above the position where its markup is):

<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>

Unfortunately, it doesn't display the box at all. If I change the event of the "Appear" effect to onclick it works almost as expected. It is immediately shown when the icon is clicked and it dissapears 3 seconds after the AJAX operation was completed. But I don't want it to appear immediately after the click, because it would be wrong to indicate that the item was added to the basket, when in fact the operation hasn't even started yet. This becomes even more important, when I want to indicate some error or want to include some item specific information into the box, which is only available after the item was added.

So any ideas how to do this? And why adding two effects for the same event does not work?

(I've already looked at the effect-example from the RichFaces live demo. The examples do almost work the same, execept that they add the second effect with explicitly stating the for attribute. But even this does not work for me.)

Update: I've tried using the rich:toolTip for this purpose, which actually seems to be quite flexible. But no matter what I do, I can't attach anything to the "oncomplete" (I've also tried just "complete") event of the a4j:commandLink, except one effect... seems there is some bug/undocumented behaviour regarding that event. I've just found this bug report: RF-3427

Answer 1

Your defining targetId outside the parameters. What you want to do is:

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

Try that, and I think it will work.