12 Replies Latest reply on Sep 10, 2013 8:31 PM by kishore mannem

    Confirmation dialog using Rich componentControl

    Val Sw Expert
      I need to show confirmation dialog (with 'Yes' 'No' option) on a button click in Seam, I tried the sample
      http://livedemo.exadel.com/richfaces-demo/richfaces/componentControl.jsf?c=componentControl&tab=usage#

      But it works only for s:link, if I use s:button and click on Delete nothing happens...

      Is there a way around to handle this, what is wrong in the code... any good example ?

      Please suggest...

      xhtml
      <h:form id="test">   
      <s:decorate id="affinityCompoundDecoration" template="layout/edit.xhtml">
           <h:inputText id="affinityCompound" required="true" value="test"/>
      </s:decorate>

      <f:subview xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:a4j="http://richfaces.org/a4j"
        xmlns:rich="http://richfaces.org/rich">

      <rich:modalPanel id="panel" width="350" height="100">
           <f:facet name="header">
                <h:panelGroup>
                     <h:outputText value="Confirmation Message"></h:outputText>
                </h:panelGroup>
           </f:facet>

           <f:facet name="controls">
                <h:panelGroup>
                     <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" id="hidelink"/>
                     <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
                </h:panelGroup>
           </f:facet>
           
           <s:button id="yes" value="Yes" action="#{studyHome.remove}" immediate="true"/>       
           <s:button id="no" value="No" propagation="end"/>
      </rich:modalPanel>

      <s:button value="Delete" id="button">
           <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
      </s:button>

      <!-- THIS WORKS, but I want to use button -->
      <!--<h:outputLink value="#" id="link">
           Delete
           <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
      </h:outputLink>-->
      </f:subview>
      </h:form>
        • 1. Re: Confirmation dialog using Rich componentControl
          Daniel Roth Apprentice

          This is a more a richfaces question... but the s:button makes me forced to answer ;-)


          A button by default submits the form. Even if s:button doesn't do it, it will do a postback...


          I suggest you try a commandButton in its own form and force it to not postback (something like h:form onsubmit="return false")


          or


          Skin the link as a button :-)

          • 2. Re: Confirmation dialog using Rich componentControl
            Daniel Roth Apprentice

            oh, you could use an a4j:commandButton. It will just do an ajax postback...

            • 3. Re: Confirmation dialog using Rich componentControl
              Val Sw Expert
              Thank you for replying and helping on this, I tried but no success, here is the output:

              a) If I click on "Delete this" BUTTON nothing happens.
              b) If I click "Delete" LINK, rich:modalPanel pops up, with "Yes", "No" button, clicking on Yes or No does not close the model panel , nothing happens....

              I am new to all this, please suggest what should I change in the code, so that when user click No, it should hide the model panel and show parent page...

              xhtml
              -----
              <ui:define name="body">   
                  <h:messages globalOnly="true" styleClass="message" id="globalMessages"/>
                  <h:form id="listTest" styleClass="edit">   
                  <s:decorate id="affinityCompoundDecoration" template="layout/edit.xhtml">
                        <ui:define name="label">Affinity Compound</ui:define>
                          <h:inputText id="affinityCompound"
                                           required="true" value="Test Affinity"/>
                  </s:decorate>
                   .... other fields
                 
                  <f:subview xmlns="http://www.w3.org/1999/xhtml"
                             ..
                     xmlns:a4j="http://richfaces.org/a4j"
                    xmlns:rich="http://richfaces.org/rich">
                 
                  <rich:modalPanel id="panel" width="350" height="100">
                      <f:facet name="header">
                          <h:panelGroup>
                              <h:outputText value="Confirmation Message"></h:outputText>
                          </h:panelGroup>
                      </f:facet>
                      <f:facet name="controls">
                          <h:panelGroup>
                              <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" id="hidelink"/>
                              <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
                          </h:panelGroup>
                      </f:facet>
                      <a4j:commandButton id="delete" value="Yes" action="#{studyHome.remove}" immediate="true"/>       
                      <a4j:commandButton id="cancel" value="No" propagation="end"/>       
                  </rich:modalPanel>
                 
                  <a4j:commandButton value="Delete this" id="button">
                       <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
                  </a4j:commandButton>
                 
                  <h:outputLink value="#" id="link">
                      Delete
                      <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
                  </h:outputLink>
              </f:subview>
              </h:form>
              </ui:define>
              • 4. Re: Confirmation dialog using Rich componentControl
                Daniel Roth Apprentice

                you don't happen to run jboss as 4.2.3 (or some other as with jsf 1.2.09?)

                • 5. Re: Confirmation dialog using Rich componentControl
                  Val Sw Expert

                  I am using jboss-4.2.3, jboss-seam-2.0.2.SP1.
                  Created the project using seam generate-ui... anything else I should check ?

                  • 6. Re: Confirmation dialog using Rich componentControl
                    Daniel Roth Apprentice

                    Might be this bug in Sun JSF RI:


                    http://www.jboss.com/index.html?module=bb&op=viewtopic&t=144138


                    Replace the jsf-libs in jboss 4.2.3 for those in 4.2.2 (or just downgrade to 4.2.2)


                    • 7. Re: Confirmation dialog using Rich componentControl
                      Val Sw Expert

                      Thanks Daneil for the link, we can't downgrade... we will try some other option...


                      • 8. Re: Confirmation dialog using Rich componentControl
                        Daniel Roth Apprentice

                        Replace the jsf-libs in the jboss then :-)

                        • 9. Re: Confirmation dialog using Rich componentControl
                          Josh Martin Newbie

                          I have successfully done what I think you are trying to do.  Im using modal panels for my input forms and confirmations and I am using buttons and not links.  Here is what I did for delete:


                          Snippet from console.xhtml (displays users and actions that can be performed).  Near the bottom are the buttons that open the confirmation modals:



                                       <rich:tab label="User Manager">
                                             <ui:include src="userModalPanels.xhtml"></ui:include>
                                             
                                             <h:form>
                                                  <p><a4j:commandButton value="New User" action="#{usermanager.init}" oncomplete="Richfaces.showModalPanel('createUserPanel');" /></p>
                          
                                                  <rich:dataTable id="usersTable" value="#{foundUsers}" var="user" rows="10">
                                                       <f:facet name="header">
                                                        <rich:datascroller id="userTableScroller1" for="usersTable" ajaxSingle="false" reRender="userTableScroller2" />
                                                    </f:facet>
                                                    
                                                       <rich:column>
                                                            <f:facet name="header"><h:outputText value="User ID" /></f:facet>
                                                            <h:outputText value="#{user.userId}" />
                                                       </rich:column>
                                                       
                                                       <rich:column>
                                                            <f:facet name="header"><h:outputText value="Last Name" /></f:facet>
                                                            <h:outputText value="#{user.lastName}" />
                                                       </rich:column>
                                                       
                                                       <rich:column>
                                                            <f:facet name="header"><h:outputText value="First Name" /></f:facet>
                                                            <h:outputText value="#{user.firstName}" />
                                                       </rich:column>
                                                       
                                                       <rich:column>
                                                            <f:facet name="header"><h:outputText value="Phone" /></f:facet>
                                                            <h:outputText value="#{user.phone}" />
                                                       </rich:column>
                                                       
                                                       <rich:column>
                                                            <f:facet name="header"><h:outputText value="Email" /></f:facet>
                                                            <h:outputText value="#{user.email}" />
                                                       </rich:column>
                                                       
                                                       <rich:column>
                                                            <f:facet name="header"><h:outputText value="Actions" /></f:facet>
                                                            
                                                            <a4j:commandButton value="Edit" action="#{usermanager.init}" oncomplete="Richfaces.showModalPanel('editUserPanel');" reRender="userInfoToEdit" />
                                                            <a4j:commandButton value="Delete" action="#{usermanager.init}" oncomplete="Richfaces.showModalPanel('deleteUserPanel');" reRender="userInfoToDelete" />
                                                       </rich:column>
                                                       
                                                       <f:facet name="footer">
                                                        <rich:datascroller id="userTableScroller2" for="usersTable" ajaxSingle="false" reRender="userTableScroller1" />
                                                    </f:facet>
                                                  </rich:dataTable>
                                             </h:form>
                                        </rich:tab>




                          Modal Panel Confirmation:



                               <rich:modalPanel id="deleteUserPanel" autosized="true">
                                    <f:facet name="header">
                                         <h:panelGroup>
                                              <h:outputText value="Delete User" />
                                         </h:panelGroup>
                                    </f:facet>
                                    
                                  <f:facet name="controls">
                                      <h:panelGroup>
                                          <h:graphicImage value="/img/close.png" style="cursor:pointer" id="hideDeleteUserPanel" />
                                          <rich:componentControl for="deleteUserPanel" attachTo="hideDeleteUserPanel" operation="hide" event="onclick" />
                                      </h:panelGroup>
                                  </f:facet>
                                   
                                    <s:div id="userInfoToDelete" style="width:250px">
                                        <p><h:graphicImage value="/img/msgwarn.png" /> Are you sure you want to delete '<h:outputText value="#{user.userId}" />'?</p>
                                        
                                        <h:form>
                                             <h:inputHidden id="deleteUserId" value="#{user.userId}" />
                                             
                                             <center>
                                                   <h:commandButton value="Delete" action="#{usermanager.delete}" />
                                                   <h:commandButton value="Cancel" action="#{usermanager.cancel}" />
                                              </center>
                                         </h:form>
                                    </s:div>
                               </rich:modalPanel>




                          Then here are the init(), delete(), and cancel() methods (part of the usermanager class):



                               ...
                          
                               @Begin
                               public String init() {
                          
                                    return null;
                               }
                          
                               ...
                          
                               @End
                               public String delete() {
                          
                                    log.warn( "Deleting user: ", this.user.getUserId() );
                                    
                                    User tempUser = entityManager.merge( this.user );
                                    this.entityManager.remove( tempUser );
                                    this.find();
                                    this.user = null;
                          
                                    return null;
                               }
                          
                               @End
                               public String cancel() {
                          
                                    this.user = null;
                          
                                    return null;
                               }
                          
                               ...



                          • 10. Re: Confirmation dialog using Rich componentControl
                            Val Sw Expert

                            Thanks Josh, seems to be helpful, we will try it soon.


                            Regards

                            • 11. Re: Confirmation dialog using Rich componentControl
                              narvava Newbie
                              <html>
                              Hi Thanks for your code. But I don't understand how do you get the control from rich:datatable to modalPanel.
                              I mean...when I use like following code snippet in modalpanel

                              <p><h:graphicImage value="/img/msgwarn.png" /> Are you sure you want to delete '<h:outputText value="#{user.userId}" />'?</p>
                              I am getting  Target "Unreachable, identifier 'memberdetails' resolved to null"  error.

                              Could you please explain how to the control from the table to modalpanel
                              </html>
                              • 12. Re: Confirmation dialog using Rich componentControl
                                kishore mannem Newbie

                                <rich:column id="colSearchResultDelete" width="12.5%">

                                 

                                  <f:facet name="header">

                                  <h:outputText id="lblSearchResultDelete"

                                  styleClass="epayHLabel" value="#{messages.DELETE}"></h:outputText>

                                  </f:facet>

                                 

                                  <rich:modalPanel id="confirmPopUp" width="350" height="100">

                                         <f:facet name="header">                

                                          <h:outputText value="Confirm"></h:outputText></f:facet>

                                          <h:outputText value="Are you sure you want to delete"></h:outputText>

                                           <br /><br/>

                                          <a4j:commandButton value="OK"  action="#{pc_MaintainDivStore.doBtnDeleteAction}" />  

                                          <a4j:commandButton value="Close"  onclick="#{rich:component('confirmPopUp')}.hide()"/>

                                  </rich:modalPanel>

                                 

                                 

                                 

                                 

                                 

                                  <a4j:commandButton type="submit" value="#{messages.DELETE}"

                                  id="btnDelete" styleClass="epayFlatButtonSmall">

                                  <rich:componentControl for="confirmPopUp" attachTo="btnDelete" operation="show" event="onclick"/>

                                  </a4j:commandButton>

                                  </rich:column>