RichFaces confirmation dialog

While out-of-the-box confirmation dialog is not yet available in RichFaces, I will show you how to build one. Tomorrow I will show how to make it more reusable by packaging it as a Facelet custom tag.


If Cancel is clicked then nothing happens. If OK is clicked then the value is saved.

.rich-mpnl-body {
	text-align: center




Line #22 is a Save button. It launches the Confirmation dialog, it doesn’t actually invoke the save action.

Lines #28-42 is the modal panel. The modal panel is client-side only in this case as there is no form inside. Clicking on the Cancel button will hide the model panel and do nothing else. Clicking on the OK button will hide the modal panel and will also call the submit() function. submit() function is defined by a4j:jsFunction and basically sends an Ajax request to the server. It also allows to specify what action to call. The a4j:jsFunction component is very similar to a4j:commandButton (or a4j:commandLink(), but allows to perform an Ajax request from a Javascript code directly.

Confirmation dialog icon was downloaded form DesignMagus.

36 thoughts on “RichFaces confirmation dialog

  1. I recieve this error always use rich:component, ‘rich:component’ not found

    i use

    why?? please help me

    75 ERROR [STDERR] java.lang.ClassNotFoundException: No ClassLoaders found for: org.richfaces.function.RichFunction
    10:51:04,275 ERROR [STDERR] at

    javax.faces.FacesException: javax.faces.FacesException: javax.faces.FacesException: javax.el.ELException: /web/mod/servicios/solicitudCliente.xhtml @165,68 onclick=”#{rich:component(‘confirmation’)}.show();return false”: Function ‘rich:component’ not found

  2. Hi Max,

    thanks for your nice post. I’m experiencing a strange behavior in the following case. I want to delete an item that is listed in a rich-datatable. Therefore, I am binding the ID of the item to the selectedId-property of the managed bean :

    When I use this WITHOUT the confirmation dialog, everthing works fine. But, when using the dialog to confirm the deletion, the value of selectedId (which is of type HtmlOutputText) isn’t the ID of the selected item. It’s ALWAYS the ID of the LAST item in the list. Do you have any idea what’s happening here?
    Thanks in advance

  3. Uh, the code was removed, so one more try:

    <rich:dataTable value=”#{bean.items}” var=”item”>
    <rich:column >
    <f:facet name=”header”>
    <h:outputText value=”ID” />
    <h:outputText value=”#{}” binding=”#{bean.selectedId}” />

  4. Hi Max,
    I’ve just seen you answered. I need a few time to build an minimalistic example, but I’ll be back 😉

  5. OMG, that’s the simple but logic explanation of what’s happening!
    Shame on me, should have thought about that by myself.
    Anyway, thank you very much for your help!
    Greetings from Germany

  6. Hi Max

    I really enjoy reading all your tutorials but the problem is I always always get this error as soon as I put in the code for the rich:modal part in my jsp page

    #{..} is not allowed in template text

    I’m using tomcat 6.0.20 and richfaces-api-3.2.0.GA.jar

    No matter what I do the error will not go away. Any ideas? Thanks for the guides.

  7. Thank you very much. I’ll try using facelets. Don’t need the JSP pages. I guess I can run the demo site examples now as well.

  8. In your example of custom facelets, the two values passed are the label and the action method. When I try passing the action method as done in your second example, tomcat thinks that save is a member variable in my bean class and expects a getSave() method for it to work. or could you provide the backing beans for the save method as well?

  9. Oh yeah… sorry. Here it is:

    pages.xml with navigation rule for logout:
    Snippet from menu.xhtml for the logout link (opens the dialog):
    Snippet from modalPanelConfirm.xhtml:

    I tried a bit around and it seems, that the action call from a4j:jsFunction get not be recognized by Seam, so that it doesn’t use the navigation rule from pages.xhtml.

    This results in a proper logout and a normal page refresh, which in turn will does not work because this page are only viewable for a logged in user. So a redirect to my login.xhtml with a warning that one should be logged in occurs.

    If I call the idenity.logout action from a normal s:link or a4j:commandLink pages.xml nav rules will be respected and it behaves normally.

    Thank you

  10. @martin: Intersting, the action from a4j:jsFunction is the same as in h:commandLink or a4j:commandLink. Are you sure the action is called? What if you set the navigation outcome directly in action attribute?

  11. Hi,

    Actually, i’m using this confirmation dialog on a back button. This button is need in order to advise the user that are going out without save the entity.
    As Martin i use Seam and in the same manner a4j:jsFunction get not be recognized by Seam.
    Obviously, if i use only a simple button the action is read and button send back to the previous page.
    I Attach the code adapted to my case.

    .rich-mpnl-body {
    text-align: center

    Richiesta Conferma

    Protocolla Atto

    thanks in advance

  12. ok it’s impossibile attach the code.
    But it’s exactly the same of the example with the only difference that i haven’t input text in the form, but only a4j:commandButton and a4j:function that call an action that redirect to the previous page.

  13. @erik: See if you can navigate with a4j:jsFunction when using Seam but from a regular page (not from a modal panel). Just use a button and onclick call a4j:jsFunction.

  14. @max:
    Yes Im sure that the action will be called, because Seam will log me out (identity.logout is a method from Seam framework). The navigation rule in pages.xml will be ignored.

    When I call my own action, which will write some test stuff to stdout and then returns my desired page navigation it does NOT work either.

    I tried to call the a4j:jsFunction action without a modalpanel as you suggested for eric and it DID work!!

    I also tried to surround the modalpanel with the form but this did NOT work.

    It seems that the modalPanel is the bad guy!

    Thank you,

  15. @max: Yes that worked. It had to do with the s:button from Seam. h:commandButton and a4j:commandButton works as well. Wondering why… anyway: Thank you for help!!
    Maybe you could this mention in your blog text above so that others don’t need to read all the tick-tock conversation.

  16. @Lars: You can definitely use the browser dialog, however, a pop-up gives you more options such as styling as the application, inserting content and modal and non-modal.

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 )

Google+ photo

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

Twitter picture

You are commenting using your Twitter 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.