Confirmation dialog using Rich componentControl

[valatharv]

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>

[danielc.roth]

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 :-)

[danielc.roth]

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

[valatharv]

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>

[danielc.roth]

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

[valatharv]

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 ?

[danielc.roth]

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)

[valatharv]

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

[danielc.roth]

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

[thetikigod.tiki_god.mail.com]

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;
     }

     ...

[valatharv]

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

Regards

[narvava]

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

[kishorereddy84]

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