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.

screenshot011.png

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






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





   
   
   

   



   Confirmation

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 responses to “RichFaces confirmation dialog”

  1. RichFaces confirmation dialog #2 – custom tag | Maxa Blog

    […] promised, this is the same Confirmation dialog as here but now it’s packaged as a Facelet custom tag so it’s much easier to reuse. 1 2 3 4 5 6 […]

    Reply
  2. RichFaces confirmation dialog – complete edition | Maxa Blog

    […] Confirmation dialog […]

    Reply
  3. jota Avatar
    jota

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

    i use
    richfaces-api-3.3.0.GA.jar
    richfaces-impl-3.3.0.GA.jar
    richfaces-ui-3.3.0.GA.jar

    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 org.jboss.mx.loading.LoadMgr3.beginLoadTask(LoadMgr3.java:212)

    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

    Reply
  4. max Avatar
    max

    Make sure you don’t have an older version of RichFaces in class path where rich:component function wasn’t yet available.

    Reply
  5. Matthais Müller Avatar
    Matthais Müller

    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
    Matthias

    Reply
  6. Matthais Müller Avatar
    Matthais Müller

    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” />
    </f:facet>
    <h:outputText value=”#{item.id}” binding=”#{bean.selectedId}” />
    </rich:column>
    …

    Reply
  7. max Avatar
    max

    Can you post the complete code (page and bean)? You can use http://tinypaste.com .

    Reply
  8. Matthias Müller Avatar
    Matthias Müller

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

    Reply
  9. Matthias Müller Avatar
    Matthias Müller

    Here we go:

    The managed bean:
    http://tinypaste.com/2093f

    The xhtml-page:
    http://tinypaste.com/b2252

    Hope the links work…

    Reply
  10. max Avatar
    max

    You have a4j:jsFunction defined in each row. When the page is rendered, doSomething is overwritten by function in each new row. When you call it, it references the last function and you get the last record. Here is a good example how this should be done: http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=editDataTable

    Reply
  11. Matthias Müller Avatar
    Matthias Müller

    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
    Matthias

    Reply
  12. hurric Avatar
    hurric

    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.

    Reply
  13. max Avatar
    max

    Paste the entire page and error via http://tinypaste.com

    Reply
  14. hurric Avatar
    hurric

    the jsp page hosted on tomcat

    http://tinypaste.com/e40213a

    the error message

    http://tinypaste.com/20ed7

    Reply
    1. max Avatar
      max

      You can’t use #rich:component(‘id’) with plain HTML tags in JSP, only in Facelets. Use it with h:outputLink

      Reply
  15. hurric Avatar
    hurric

    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.

    Reply
  16. hurric Avatar
    hurric

    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?

    Reply
  17. max Avatar
    max

    I’m only passing the #{userBean}, not the actual method. The method would look like this:

    public void save () {
 ...
}
    Reply
  18. hurric Avatar
    hurric

    sorry if this is the wrong section but I’m wondering if you’ve written a tutorial on ExtendedDataTables or if it’s in your book. I’m wondering how to do this

    http://www.jboss.org/index.html?module=bb&op=viewtopic&t=112564&postdays=0&postorder=asc&start=0

    Lazy loading of data when using a datascroller on each request when a new page is loaded. I checked the live demo but not quite sure of small stuff like dataprovider/etc.

    Reply
  19. max Avatar
    max

    I don’t have such example or blog post.

    Reply
  20. martin Avatar
    martin

    Hi,

    Im using this confirmation dialog to confirm a logout in a seam application. This works fine but if Im using as the submit action the navigation rules in pages.xml are being ignored:

    The return String for a navigation of an action method of a seam component will be also ignored.

    Thank you for help.
    Using Seam 2.1.2 with Richfaces 3.3.3

    Reply
  21. max Avatar
    max

    @martin: I don’t see your code, please repost via pastie.org

    Reply
  22. martin Avatar
    martin

    Oh yeah… sorry. Here it is:

    pages.xml with navigation rule for logout: http://pastie.org/1565574
    Snippet from menu.xhtml for the logout link (opens the dialog): http://pastie.org/1565580
    Snippet from modalPanelConfirm.xhtml: http://pastie.org/1565583

    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

    Reply
  23. max Avatar
    max

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

    Reply
  24. erik Avatar
    erik

    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

    Reply
  25. erik Avatar
    erik

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

    Reply
  26. max Avatar
    max

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

    Reply
  27. martin Avatar
    martin

    @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.
    see http://pastie.org/1573841

    I tried to call the a4j:jsFunction action without a modalpanel as you suggested for eric and it DID work!!
    see http://pastie.org/1573846

    I also tried to surround the modalpanel with the form but this did NOT work.
    see http://pastie.org/1573849

    It seems that the modalPanel is the bad guy!

    Thank you,
    Martin.

    Reply
  28. max Avatar
    max

    @Martin: Looking at the 1st and 3d links, where do you actually call a4j:jsFunction?

    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.
    see http://pastie.org/1573841

    I also tried to surround the modalpanel with the form but this did NOT work.
    see http://pastie.org/1573849

    Reply
  29. martin Avatar
    martin

    its the Ok button within my modalPanel.
    Snippet from modalPanelConfirm.xhtml: http://pastie.org/1565583

    Reply
  30. max Avatar
    max

    @martin: Try replacing s:button with just a regular HTML button (input type=”button”). Let me know if that works.

    Reply
  31. martin Avatar
    martin

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

    Reply
  32. max Avatar
    max

    @martin: It’s probably a bug somewhere, probably in Seam. I’d go ahead an enter it into their Jira (or RichFaces).

    Reply
  33. Lars Avatar
    Lars

    I don’t get it. It’s cool! But why would I need it? I there something I’m missing or can you just use this:

    Reply
  34. Lars Avatar
    Lars

    Well, i meant this:
    onclick=”return confirm(‘Are you sure?’);”

    Reply
  35. max Avatar
    max

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

    Reply

Leave a reply to Lars Cancel reply