8 Replies Latest reply on Dec 7, 2007 11:06 PM by Michael George

    Modal Panel Controls

    Michael George Newbie

      I have the following codeset -

      BeanView.java:

      /**
       *
       */
      package com.emt.view;
      
      
      public class BeanView {
       private String cancelStatus;
      
       public BeanView() {
       reset();
       }
      
       public void reset() {
       setCancelStatus("NOT CANCELLED");
       }
      
       public void cancelButtonAction() {
       System.out.println("ACTION CANCELLED");
       setCancelStatus("CANCELLED");
       }
      
       /**
       * @return the cancelStatus
       */
       public String getCancelStatus() {
       return cancelStatus;
       }
      
       /**
       * @param cancelStatus the cancelStatus to set
       */
       public void setCancelStatus(String cancelStatus) {
       this.cancelStatus = cancelStatus;
       }
      }


      home.xhtml:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition 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:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j">
      
       <h:panelGrid columns="1" id="pg">
       <a4j:commandButton value="SHOW" action="#{beanView.reset}" onclick="Richfaces.showModalPanel('mp');" reRender="pg" />
       <rich:spacer height="20px"/>
       <h:outputText value="CANCEL STATUS = #{beanView.cancelStatus}"/>
       </h:panelGrid>
      
       <rich:modalPanel id="mp" width="1000" height="400" moveable="false" resizeable="false" shadowDepth="8" top="auto" left="auto">
       <a4j:keepAlive beanName="beanView"/>
       <f:facet name="header">
       <h:form id="form1">
       <h:outputText value="Header Sect - " style="color: white; font-size:14pt;"/>
       <a4j:commandButton value="A (Y)" action="#{beanView.cancelButtonAction}" reRender="pg" />
       <a4j:commandButton value="B (N)" action="#{beanView.cancelButtonAction}" onclick="Richfaces.hideModalPanel('mp'); return false;" reRender="pg" />
       </h:form>
       </f:facet>
       <h:panelGrid columns="1" border="0" width="100%">
       <a4j:outputPanel id="content">
       <h:form id="form2">
       <h:panelGrid columns="1">
       <h:outputText value="A = CANCEL ONLY"/>
       <h:outputText value="B = CANCEL AND CLOSE"/>
       </h:panelGrid>
       <h:panelGrid columns="3">
       <a4j:commandButton value="A (Y)" action="#{beanView.cancelButtonAction}" reRender="pg" />
       <a4j:commandButton value="B (N)" action="#{beanView.cancelButtonAction}" onclick="Richfaces.hideModalPanel('mp'); return false;" reRender="pg" />
       </h:panelGrid>
       <h:panelGrid columns="1">
       <a4j:commandButton value="RESET" action="#{beanView.reset}" reRender="pg" />
       </h:panelGrid>
       </h:form>
       </a4j:outputPanel>
       </h:panelGrid>
       </rich:modalPanel>
      </ui:composition>


      I've noticed that when the controls are placed in the header facet or even the body section of the modal panel, the commandButton with an ajax post to BeanView.cancelButtonAction() works...
       <f:facet name="header">
       <h:form id="form1">
       <h:outputText value="Header Sect - " style="color: white; font-size:14pt;"/>
       <a4j:commandButton value="A (Y)" action="#{beanView.cancelButtonAction}" reRender="pg" />
       <a4j:commandButton value="B (N)" action="#{beanView.cancelButtonAction}" onclick="Richfaces.hideModalPanel('mp'); return false;" reRender="pg" />
       </h:form>
       </f:facet>
      


      ... however, when the buttons are in the controls facet it doesn't work.

       <f:facet name="controls">
       <h:form id="form1">
       <h:outputText value="Controls Sect - " style="color: white; font-size:14pt;"/>
       <a4j:commandButton value="A (N)" action="#{beanView.cancelButtonAction}" reRender="pg" />
       <a4j:commandButton value="B (N)" action="#{beanView.cancelButtonAction}" onclick="Richfaces.hideModalPanel('mp'); return false;" reRender="pg" />
       </h:form>
       </f:facet>
      


      Even more, I can't get it to work with an onclick action to hide the modal panel.
      action="#{beanView.cancelButtonAction}" onclick="Richfaces.hideModalPanel('mp'); return false;"


      On the header facet, button A posts to the bean but not button B. Neither buttons post to the bean on the controls facet. Within the body of the modal panel, I've added the same buttons and only button A posts to the bean.

      After researching the issue I saw a similar post in this forum that suggested that the form would evaluate the onclick before the action was implemented, so I placed a return false in the onclick, but it still didn't post. I'm trying a couple other things in the meantime, but would entertain any suggestions that may help.

      PROBLEM: Is there a way to click on a control in a modal panel to both close the modal panel and asynchronously post back to a cancel method inside the view bean to update data on the main screen?

      Any help would be greatly appreciated. Thanks.

        • 1. Re: Modal Panel Controls
          Florian Marwede Expert

          Just a guess: It seems very strange to me to put a form into a header. Try to use one form as only direct child of ModalPanel and be careful not to have nested forms (in context of your whole application)

          • 2. Re: Modal Panel Controls
            Michael George Newbie

            Thanks for your suggestion fmarwede. I've changed the form location to encompass the entire page content (being careful not to nest forms within the scope of the application), but it still has the same result. If placed in the header facet, the commandButton posts to the bean provided in the action param, but not from the controls facet. And I still cannot get the commandButton to both post to the bean and close the modalPanel (from either location). I've been trying different things and still get the same result. I am beginning to believe it might be a bug with the controls facet of the modalPanel component and more specifically with how the commandButton closes the modalPanel before posting to the bean. It seems to be ending the lifecycle of the a4j:commandButton post before it reaches the action. Has this been reproduced by anyone else? Is there an alternate solution?

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <ui:composition 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:rich="http://richfaces.org/rich"
             xmlns:a4j="http://richfaces.org/a4j">
            
             <h:form id="form1">
             <h:panelGrid columns="1" id="pg">
             <a4j:commandButton value="SHOW" action="#{beanView.reset}" onclick="Richfaces.showModalPanel('mp');" reRender="pg" />
             <rich:spacer height="20px"/>
             <h:outputText value="CANCEL STATUS = #{beanView.cancelStatus}"/>
             </h:panelGrid>
            
             <rich:modalPanel id="mp" width="1000" height="400" moveable="false" resizeable="false" shadowDepth="8" top="auto" left="auto">
             <a4j:keepAlive beanName="beanView"/>
             <f:facet name="header">
             <h:outputText value="Header Sect - " style="color: white; font-size:14pt;"/>
             <a4j:commandButton value="A (Y)" action="#{beanView.cancelButtonAction}" reRender="pg" />
             <a4j:commandButton value="B (N)" action="#{beanView.cancelButtonAction}" onclick="Richfaces.hideModalPanel('mp'); return false;" reRender="pg" />
             </f:facet>
             <h:panelGrid columns="1" border="0" width="100%">
             <a4j:outputPanel id="content">
             <h:panelGrid columns="1">
             <h:outputText value="A = CANCEL ONLY"/>
             <h:outputText value="B = CANCEL AND CLOSE"/>
             </h:panelGrid>
             <h:panelGrid columns="3">
             <a4j:commandButton value="A (Y)" action="#{beanView.cancelButtonAction}" reRender="pg" />
             <a4j:commandButton value="B (N)" action="#{beanView.cancelButtonAction}" onclick="Richfaces.hideModalPanel('mp'); return false;" reRender="pg" />
             </h:panelGrid>
             <h:panelGrid columns="1">
             <a4j:commandButton value="RESET" action="#{beanView.reset}" reRender="pg" />
             </h:panelGrid>
             </a4j:outputPanel>
             </h:panelGrid>
             </rich:modalPanel>
             </h:form>
            </ui:composition>


            • 3. Re: Modal Panel Controls
              Mikael Andersson Master

              Hi.

              You need to put a form in the modalpanel, think there is something about this in the developer docs ( the modal panel is moved up in the dom or something like that, think IE is the culprit).

              Instead of using onclick, try using oncomplete for closing the modalpanel.

              mike

              • 4. Re: Modal Panel Controls
                Michael George Newbie

                Thanks for the suggestion Mike... the oncomplete seems to fix one of my two problems. By putting the following code in the output panel it closes the modalPanel and posts to the bean. However, I cannot use the same logic in the controls facet. Any other ideas?

                <a4j:commandButton value="B (Y)" action="#{beanView.cancelButtonAction}" oncomplete="Richfaces.hideModalPanel('mp');" reRender="pg" />


                • 5. Re: Modal Panel Controls
                  Mikael Andersson Master

                  Never tried having a form in the control facet, so I'm afraid I can't help you with that one.

                  We'll just have to hope that a framework developer spots this thread and provides some insight.

                  It might be worth checking out the sources and have a look at what is going on in there.
                  The SVN is nicely structured and you'll easily find the maven project related to the modalPanel.

                  good luck

                  • 6. Re: Modal Panel Controls
                    Michael George Newbie

                    The placement of the form doesn't seem to change the behavior. I can place the form on the outside of the modal panel and I still get the same result as if I placed it in one of the facets. The issue is not the form, I don't think; I believe it's how the controls facet is handling the post back to the bean. But like you suggested I will do some more digging in the code. Hopefully either myself or one of the developers can come up with a solution to post to the forum. Thanks for your help Mike. Cheers.

                    • 7. Re: Modal Panel Controls
                      Michael George Newbie

                      Any updates on this issue?

                      • 8. Re: Modal Panel Controls
                        Michael George Newbie

                        Ok so here's the deal. With much investigating and trial and error, I found out that the modalPanel controls facet components require an ID to actually perform the post-back to the bean. I've already received assistance from mail.micke@gmail.com with the oncomplete to perform both the post-back and the javascript within the same lifecycle (THANKS MIKE!!!). Without the ID's on the control components, only the oncomplete javascript is performed during the lifecycle; but with it.... voila it works marvelously. Hope this helps someone else who may be struggling with finding the needle in the haystack.

                        BEFORE:

                        <f:facet name="controls">
                         <h:form id="form1">
                         <h:outputText value="Header Sect - " style="color: white; font-size:14pt;"/>
                         <a4j:commandButton value="A (Y)" action="#{beanView.cancelButtonAction}" reRender="pg" />
                         <a4j:commandButton value="B (N)" action="#{beanView.cancelButtonAction}" onclick="Richfaces.hideModalPanel('mp')" reRender="pg" />
                         </h:form>
                         </f:facet>


                        AFTER:
                        <f:facet name="controls">
                         <h:form id="form1">
                         <h:outputText value="Header Sect - " style="color: white; font-size:14pt;"/>
                         <a4j:commandButton id="buttonA" value="A (Y)" action="#{beanView.cancelButtonAction}" reRender="pg" />
                         <a4j:commandButton id="buttonB" value="B (N)" action="#{beanView.cancelButtonAction}" onclick="Richfaces.hideModalPanel('mp')" reRender="pg" />
                         </h:form>
                         </f:facet>