4 Replies Latest reply on Sep 25, 2010 12:39 AM by chakri_jboss

    modalPanel does not popup

    chakri_jboss
    chakri_jboss Sep 24, 2010 3:49 AM

      the modal panel does not popup or it appears for a second and disappears. i uses oncomplete, onclick a4j:commandButton all possible options i known. pls some one known of this help me.

       

       

      <?xml version="1.0" encoding="UTF-8" ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html 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">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Insert title here</title>
      </head>
      <body>
      <ui:composition template="/Pages/templates/template.xhtml">
          <ui:define name="loginContent">

       

              <!-- Modal Panel Wizard -->
              <a4j:form id="wizardForm">
                  <rich:modalPanel id="wizard">

       

                      <f:facet name="header">New Picture</f:facet>
                      <f:facet name="controls">
                          <h:panelGrid>
                              <a4j:commandButton value="Close" action="closeWizard"
                                  onclick="Richfaces.hideModalPanel('wizard');" />
                          </h:panelGrid>
                      </f:facet>
                             
                                       this is workspace
              </rich:modalPanel>
              </a4j:form>

       

       

           <h:form>
                  <h:panelGrid columns="2">
                      <h:outputText value="Successfully Logged in!"></h:outputText>
                      <h:commandLink value="Proceed" action="continue"></h:commandLink>
                      <rich:tabPanel switchType="ajax" style="height:500px;width=700px">
                          <rich:tab label="Home">
                              Welcome User!
                              <br />
                              <h:outputLabel value="#{message}" />
                          </rich:tab>
                          <rich:tab label="Account">
                              <rich:panel header="Profile Picture">
                                  <a4j:commandButton
                                      onclick="Richfaces.showModalPanel('wizard',{width:300,height:200});"
                                      action="startWizard" value="AddPicture" reRender="wizardForm" />
                              </rich:panel> 

                          </rich:tab>
                      </rich:tabPanel>

       

                  </h:panelGrid>
              </h:form>
          </ui:define>
      </ui:composition>
      </body>
      </html>  

       

       

       

      i dnt get where its going wrong and i am waiting for a solution since last 2 days.

       

       

      THANK YOU.

      • 8722 Views
      • Tags:
        • 1. Re: modalPanel does not popup
          kanal
          kanal Sep 24, 2010 6:13 AM (in response to chakri_jboss)

          I see that you use facelets, so you must have JSF2. Could you pls tell me what version of Richfaces you use?

           

          edit1

          I guess that you use richfaces 4.x. In this version of RF there is no modalPanel component anymore. It was replaced by popupPanel, which can behave like modalPanel (disables interaction with whole page, only panel is active).

           

          I have changed your code a little and tested it. After those changes popupPanel shows up.

           

           

                   <!-- AFTER opening ui:define -->
            <!-- Modal Panel Wizard -->
            <h:form id="wizardForm">
                <rich:popupPanel id="wizard">


                    <f:facet name="header">New Picture</f:facet>
                    <f:facet name="controls">
                        <h:panelGrid>
                            <!-- 
                            <ui:remove>
                            <a4j:commandButton value="Close" action="closeWizard"
                                onclick="Richfaces.hideModalPanel('wizard');" />
                            </ui:remove>
                            -->
                            <h:commandLink value="closeWizard">
                                <rich:componentControl target="wizard" operation="hide" />
                            </h:commandLink>
                        </h:panelGrid>
                    </f:facet>
                       
                                 this is workspace
        </rich:popupPanel>
            </h:form>

            <h:form>
                <h:panelGrid columns="2">
                    <h:outputText value="Successfully Logged in!"></h:outputText>
                    <h:commandLink value="Proceed" action="continue"></h:commandLink>
                    <rich:tabPanel switchType="ajax" style="height:500px;width=700px">
                        <rich:tab label="Home">
                        Welcome User!
                        <br />
                            <h:outputLabel value="#{message}" />
                        </rich:tab>
                        <rich:tab label="Account">
                            <rich:panel header="Profile Picture">
                                <!-- 
                                <ui:remove>
                                <a4j:commandButton
                                    onclick="Richfaces.showModalPanel('wizard',{width:300,height:200});"
                                    action="startWizard" value="AddPicture" reRender="wizardForm" />
                                </ui:remove>
                                -->
                                <h:commandLink value="AddPicture">
                                    <rich:componentControl target="wizard" operation="show" />
                                </h:commandLink>
                            </rich:panel>

                        </rich:tab>
                    </rich:tabPanel>

                </h:panelGrid>
            </h:form>
            <!-- BEFORE closing ui:define -->
            • Actions
          • 2. Re: modalPanel does not popup
            amarkhel
            amarkhel Sep 24, 2010 9:27 AM (in response to chakri_jboss)

            Hi, Chakradhar, I guess that you use jsf 1.2.

            First of all little theory:)

            When your page is initially rendered, the modal panel is not showed, it is ok. When you press on a4j:commandButton

            <a4j:commandButton
                                            onclick="Richfaces.showModalPanel('wizard',{width:300,height:200});"
                                            action="startWizard" value="AddPicture" reRender="wizardForm" />

             

             

            Richfaces.showModalPanel('wizard',{width:300,height:200}); code is executed .  It is just javaScript call to show modal panel and modalPanel is showed. But, a4j:commandButton is ajax component that performs call to server, and rerender "wizardForm", so new portion of html is returned and replaced by browser, so modalPanel that showed earlier replaced by new(returned form server), so you think that modalPanel hided.

            For prevent this you have 2 possibilities:

            1. If data in modalPanel not depend on ajax request submitted by your a4j:commandButton you can just remove reRender="wizardForm" from declaration of a4j:commandButton

            2. If data in modalPanel  depend on ajax request submitted by your a4j:commandButton(for example smth changed in actionListener method) you can do next:

            <a4j:form id="wizardForm">
                        <rich:modalPanel showWhenRendered="#{backingBean.isPopupShowed}" id="wizard">

             

                            <f:facet name="header">New Picture</f:facet>
                            <f:facet name="controls">
                                <h:panelGrid>
                                    <a4j:commandButton value="Close" action="closeWizard"
                                        onclick="Richfaces.hideModalPanel('wizard');" />
                                </h:panelGrid>
                            </f:facet>
                                   
                                             this is workspace
                    </rich:modalPanel>
                    </a4j:form>

            showWhenRendered attribbute take care about is modalPanel rendered after initial or subsequent ajax requests. You can map this property on any of your JSF backing bean. So after initial page load modalPanel will not rendered if showWhenRendered=false, then when you click on commandButton you can change(for example in actionListener) in backing bean this property to true, so after ajax request modalPanel will be showed.

              • Actions
            • 3. Re: modalPanel does not popup
              amarkhel
              amarkhel Sep 24, 2010 9:37 AM (in response to amarkhel)

              And you have 3 choice: replace your onclick attribbute by oncomplete. I'll manually tested code and it's work like a charm^)

              <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:a4j="http://richfaces.org/a4j"
                    xmlns:rich="http://richfaces.org/rich">
                         
                      <a4j:form id="wizardForm">
                          <rich:modalPanel id="wizard">

               

               

               

                              <f:facet name="header">New Picture</f:facet>
                              <f:facet name="controls">
                                  <h:panelGrid>
                                      <a4j:commandButton value="Close" action="closeWizard"
                                          oncomplete="Richfaces.hideModalPanel('wizard');" />
                                  </h:panelGrid>
                              </f:facet>
                                    
                                               this is workspace
                      </rich:modalPanel>
                      </a4j:form>

               

               

               

               

               

                   <h:form>
                          <h:panelGrid columns="2">
                              <h:outputText value="Successfully Logged in!"></h:outputText>
                              <h:commandLink value="Proceed" action="continue"></h:commandLink>
                              <rich:tabPanel switchType="ajax" style="height:500px;width=700px">
                                  <rich:tab label="Home">
                                      Welcome User!
                                      <br />
                                      <h:outputLabel value="#{message}" />
                                  </rich:tab>
                                  <rich:tab label="Account">
                                      <rich:panel header="Profile Picture">
                                          <a4j:commandButton
                                              oncomplete="Richfaces.showModalPanel('wizard',{width:300,height:200});"
                                              action="startWizard" value="AddPicture" reRender="wizardForm" />
                                      </rich:panel>

               

                                  </rich:tab>
                              </rich:tabPanel>

               

               

               

                          </h:panelGrid>
                      </h:form>
              </ui:composition>

                • Actions
              • 4. Re: modalPanel does not popup
                chakri_jboss
                chakri_jboss Sep 25, 2010 12:39 AM (in response to chakri_jboss)

                hiii Andrey and Paul,

                 

                i appreciate your concern and thankyou. i use richfaces 3.2.1. JSF 1.2 and facelets 1.1.11 , so if need to change to Richfaces 4.x are there any necessary changes to be done for JSF and facelets versions??

                 

                and i got a problem , how cani include a .xhtml page in this modalPanel which is poped up, because when i use <a4j:include > or <ui:include> upon rendering the richfaces skin is lost and it appeares as if normal html text. so is there any proper way to do that??

                 

                i am doing like this...

                 

                <rich:modalPanel id="wizard" zindex="20">

                 

                                <f:facet name="header">New Picture</f:facet>
                                <f:facet name="controls">
                                    <h:panelGrid>
                                        <a4j:commandButton value="X" action="closeImageWizard"
                                            onclick="javascript:Richfaces.hideModalPanel('wizard');" />
                                    </h:panelGrid>
                                </f:facet>
                                    <a4j:include viewId="/Pages/userInfo/userProfile.xhtml"    />
                                              
                        </rich:modalPanel>

                 

                pls help me

                 

                Thank You.

                  • Actions