Max Katz

DevRel & No-Code

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

maxkatz

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

  1. Lars Avatar
    Lars

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

    Reply
  2. Chris Avatar
    Chris

    Realy nice, thanks! 🙂

    Reply
  3. max Avatar
    max

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

    Reply
  4. Lars Avatar
    Lars

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

    Reply
  5. max Avatar
    max

    @Lars: try autosized=true

    Reply
  6. javier Avatar
    javier

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

    XXXXXXXXXXXX
    —————————
    In this time, the modal is hide!!

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

    Reply
  7. max Avatar
    max

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

    Reply
  8. Hansgregory Avatar
    Hansgregory

    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?

    Reply
  9. max Avatar
    max

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

    Reply
  10. Hansgregory Avatar
    Hansgregory

    @Max : yes i did.

    Reply
  11. max Avatar
    max

    @Hansgregory: Please link your code via http://pastie.org, I’ll run it.

    Reply
  12. Hansgregory Avatar
    Hansgregory

    @max : this is my code http://pastie.org/1324611

    Reply
  13. max Avatar
    max

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

    Reply
  14. Hansgregory Avatar
    Hansgregory

    @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

    Reply
  15. max Avatar
    max

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

    Reply
  16. Hansgregory Avatar
    Hansgregory

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

    Reply
  17. markus Avatar
    markus

    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?

    Reply
  18. max Avatar
    max

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

    Reply
  19. hari Avatar
    hari

    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.

    Reply
  20. max Avatar
    max

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

    Reply
  21. Jithu Avatar
    Jithu

    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.

    Reply
  22. max Avatar
    max

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

    Reply
  23. iPatz Avatar
    iPatz

    very helpful 😀

    Reply
  24. Saurabh Avatar
    Saurabh

    Really nice blog…

    Reply
  25. Mahesh Avatar
    Mahesh

    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.

    Reply
  26. max Avatar
    max

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

    Reply
  27. Alex Avatar
    Alex

    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

    Reply
  28. max Avatar
    max

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

    Reply
  29. Mahesh Avatar
    Mahesh

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

    Reply
  30. max Avatar
    max

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

    Reply
  31. Leonardo Avatar
    Leonardo

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

    Reply
  32. max Avatar
    max

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

    Reply
  33. Diego Avatar
    Diego

    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.

    Reply
    1. Diego Avatar
      Diego

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

      Reply
  34. Davide Avatar
    Davide

    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.

    Reply
    1. max Avatar
      max

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

      Reply
  35. Thanatos Avatar
    Thanatos

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

    Could not get property onstart of component _viewRoot:status

    Reply
  36. Stephan Avatar
    Stephan

    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?

    Reply
    1. maxkatz Avatar
      maxkatz

      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.

      Reply

Leave a Reply

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

Gravatar
WordPress.com Logo

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

Facebook photo

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

Cancel

Connecting to %s

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