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.

<h:form>
   <a4j:commandButton value="Do something" 
      action="#{bean.dosomething}"
      status="ajaxStatus"/>
</h:form>
 
<a4j:status id="ajaxStatus"
   onstart="#{rich:component('waitPanel')}
      .show('',{top:'40px', left:'80px',height:'100px', width:'200px'})"
   onstop="#{rich:component('waitPanel')}.hide()" />
 
<rich:modalPanel id="waitPanel" style="text-align:center">
   <h:outputText value="Please wait..."
      style="font-weight:bold;font-size:large" />
</rich:modalPanel>

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?

37 comments

  1. Lars

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • Diego

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

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

  18. Thanatos

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

    Could not get property onstart of component _viewRoot:status

Leave a Reply