Creating "Please wait" with RichFaces modal panel

Showing user a modal “Please wait” or “Working” dialog is a good way to prevent him or her clicking a button more than once. It can be easily done in RichFaces by combining a4j:status and rich:modalPanel tags.



When the button is clicked, a4j:status is executed. Instead of showing some text or animated image, we use onstart event to open a modal panel. While Ajax request is executing on the server, the modal panel is active and prevents clicking anything on the page. When the request is done, onstop event on status is called and hides the modal panel.

Short and neat, right?

Published by

39 responses to “Creating "Please wait" with RichFaces modal panel”

  1. Is there any possibility to let the modalPanel automatically resize (so that there is no space except the margin around “Please wait…”)?

  2. Realy nice, thanks! 🙂

  3. @Lars: automatically based on what? You could change height and width numbers when you open the panel.

  4. @max: Based on the size of the content, so that I don’t have to specify any sizes at all. My problem is for example that I can’t pre-determine which font size the user has chosen on his machine, which could lead to a box which is too small to show all content.

  5. @Lars: try autosized=true

  6. I have a problem with this solutions. In my project, some times richfaces run two ajax call, but when the first call finish, the second call is still alive and the fist stop the modal panel.

    I try paint a graph 😉

    First call = XXXXXX
    Second call = ———

    In this time, the modal is hide!!

    is there any solutions to this? is possible to know if there is any ajax call active?

  7. @javier: if you use a single status, then the status should stay active even after the first request is done.

  8. i try to apply this on my page. but if i’m doing any ajax request, the pop up always show up, even though i’m only set status=’ajaxstatus’ in one button.

    i just want to show pop up for that current button. how i’m supposed to do?

  9. @Hansgregory: did you also set a4j:status id=”ajaxstatus”?

  10. @Max : yes i did.

  11. @Hansgregory: Please link your code via, I’ll run it.

  12. @Hansgregory: on either on the buttons you need to set status=”ajaxStatus”

  13. @max: i think u misunderstand my problem. i want to show the popup if i click either of the button. but even if i dont set status=”ajaxStatus”, the popup still show up when i click in the button that i dont set status=”ajaxStatus”. like the code i give u. both button dont have that status, but when i click the button, the popup appear. if i dont set status=”ajaxstatus”, why the popup still show. that’s my question

  14. @Hansgregory: status is shown when either of the buttons is clicked because it’s page level status. If you don’t specifically create a named status (refer to it by id), then any Ajax component on the page will activate the status.

    It’s also possible to attach a status to particular region (a4j:region).

    Hope this helps.

  15. oh i see. i use a4j:region and it works for me. thanks max

  16. hmm ie loses focus on the wait panel…? how to get ie working, so he wont forget the element which was focused before the wait-panel apeared?

  17. @markus: try using ‘focus’ attribute on button, set it to component on which you want focus after request.

  18. Hi,

    I want the please wait box to be displayed for non-ajax requests(submissions).

    using a4j:status and rich:modalpanel. How to achieve it.

  19. @hari: not possible for a non-ajax request.

  20. Hi,

    This Functionality is not working in google chrome. Once the waiting page is displayed, it is not hiding and not navigating to other pages.

    any suggestions on this would be a great help.

  21. @Jithu: does it work in Firefox, for example? It’s not supposed to navigate, the pop-up should just close.

  22. very helpful 😀

  23. Really nice blog…

  24. Thanks for this blog @max …

    I followed these steps and got the wait modal panel working. But facing some further problems.

    I am using JSF 1.2 with faceletes, rich faces 3.3.3.Final on Liferay portal using portletbridge 2.1.0.Final

    Intermittently the wait modal panel stop showing up. once it stop showing up, non of the my other model panels are visible as well. I am not sure what is happening. I ignored this problem till now but now it has reached a situation where it has become a show stopper.

    Please help….
    Any pointer are welcome….
    Thanks in advance.

  25. @Mahesh: I don’t know why it’s not working… I didn’t test it in Liferay. Check to see if there are any JavaScript errors when the pop-up stops showing.

  26. Hansgregory and Max,

    I’m having the same problem that Hansgregory had.
    Could some of you please give me an example in the use of a4j:region?

    Best regards

  27. @Alex: define a4j:region with id. Then define a4j:status and set the ‘for’ attribute pointing to the region id. Any request from that region will invoke the status.

  28. @Max,
    Sorry was away and due to various reasons could not test this further.
    BTW No errors found on the console.
    A quick query. Do you suggest any other way to handle “please wait” so that User gets feedback that a server is working and no input is available.

    Thanks in advance.

  29. @Mahesh: You could use jQuery directly, it should more “light weight”

  30. hi Max,,
    thanks for your tutorial
    btw i had an issue about “please wait status” im using status attribute a4j:commandButton and its works,, but i want when loading status complete it will be redirect to another area, but it doesnt redirect to the pages that i desired,, but when im using h:commandButton its redirect to another page but “loading status” it doesnt working,,

    how could i use please wait status using h:commandButton so it could redirect to another page as well..

  31. @Leonardo: h:commandButton sends a regular request (non Ajax),it’s not possible to show a status.

  32. I had the same problem that @Hansgregory, but in RichFaces 4 the solution was to use the “status” attribute of tag inside the “name” attribute of (instead of id). That way, the wait panel only appears when the command button is clicked, not in other ajax request.

    1. My bad, cant use html inside comments. I was refering to a4j:commandButton and aj4:status tags respectively. Thanks max for the article.

  33. Hi, I have a problem: since the wait page does not generate any data exchange between the client and the server where the operation is executed, the connection is considered as inactive after some minutes and the wait page stands on the screen even if the operation is successfully ended. Could you suggest me how to send even a single bite from the wait page to the server in order to show the connection as active? Thanks a lot.

    1. I haven’t been using RichFaces for some.. I’m not as familiar with latest API this component has.

  34. Hi! Im trying to use this modal panel, but I get his error:

    Could not get property onstart of component _viewRoot:status

  35. Hey thanks, really nice Article.
    I’m using this very often in my Application, but i have an ugly side effect:
    When the Ajax Request lasts only about 0.5 seconds than the Status-Popup is just flashing. So its actually not necessary to display anything (cause of the short duration). So i thought about a Display-Delay (about 0.5 or 1 Second). So when the Ajax-Request is shorter than this, nothing will be shown.

    Have you ever implemented something like that before?

    1. Hi Stephan – I haven’t implemented this idea before but it should work. You just need to figure out whether to keep the popup for that extra second or not.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.